@charset "UTF-8";



/*=============================================

 * <main>

 *=============================================*/

main {

    padding-top: 0;

}



header {

    position: static;

    padding-bottom: 0;

}



/*=============================================

 * <header>

 *=============================================*/

header .nav-bottom {

    margin-bottom: 20px;

}



#sec1 .box {

    border: 1px solid #f33b3b;

    position: relative;

    margin-left: -115px;

    margin-right: -115px;

    padding: 82px 20px 63px;

    text-align: center;

}



#sec1 .box:before {

    content: '';

    position: absolute;

    border: 2px solid #f33b3b;

    top: -5px;

    left: -5px;

    right: -5px;

    bottom: -5px;

}



#sec1 .box:after {

    content: '';

    position: absolute;

    bottom: 0;

    right: 0;

    background: url("../img/concept/icon_pig.png");

    background-size: cover;

    width: 43px;

    height: 21px;

}



#sec2 .bg_prallax {

    position: relative;

}



#sec2 .bg_prallax .img_parallax {

    clip: rect(0, auto, auto, 0);

    margin-bottom: 0;

    bottom: 0;

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    min-height: inherit;

    padding: 200px 0 0px;

}



#sec2 .bg_prallax .img_parallax img {

    width: 100%;

    height: 100vh;

    position: fixed;

    top: 0;

    left: 0;

    padding: 0;

    margin: 0;

    object-fit: cover;

    z-index: -1;

    transform: translateZ(0);

}



#sec2 .txt {

    position: relative;

    z-index: 2;

    text-align: center;

    padding: 200px 10px 30px;

}



#sec2 .set1 {

    padding: 100px 0 140px;

}



#sec2 .set1 .slide2 {

    display: flex;

    justify-content: space-between;

}



#sec2 .set1 .slide2 .item {

    width: 300px;

}



#sec2 .set1 .slide2 .item h3 {

    text-align: center;

    font-size: 25px;

    font-family: 'Noto Serif JP', serif;

    letter-spacing: 0.7em;

    background: #ffeedc;

    line-height: 1.5;

    padding: 2px 10px;

}



#sec2 .set1 .slide2 .item .txt {

    padding: 26px 30px 31px;

}



#sec3 .content {

    display: flex;

    justify-content: space-between;

    flex-direction: row-reverse;

    margin-bottom: 50px;

}



#sec3 .photo {

    text-align: center;

    background: #fff;

    /*background: linear-gradient(180deg, #ffc6c6 33%, #fff4f4 33%, #fff4f4 66%, #ffc6c6 66%);*/

    width: 50%;

    display: flex;

}



#sec3 .photo>p {

    align-self: center;

    margin: 0 auto;

}



#sec3 .box {

    width: 50%;

    background: url("../img/concept/s3_bg.jpg") center no-repeat;

    background-size: cover;

}



#sec3 .box .text {

    width: 450px;

    margin: 0 auto;

    padding: 101px 0 111px;

}



#sec3 .btn__ {

    text-align: center;

    padding: 30px 0 30px;

    margin-left: -60px;

    margin-right: -60px;

}



@media only screen and (min-width: 1000px) {

    header h1 {

        padding: 29px 0 20px;

    }



    #keyTop {

        margin-left: -100px;

        margin-right: -100px;

    }



    #sec1 {

        padding-bottom: 125px;

    }



    #sec1 h2 {

        margin-bottom: 75px;

    }



    #sec1 h3 {

        margin-bottom: 23px;

    }



    #sec2 .bg_prallax .img_parallax {

        background-image: url("../img/concept/s2_parallax.jpg");

        min-height: inherit;

    }



    #sec2 .bg_prallax .img_parallax img {

        opacity: 0;

    }



    #sec2 .bg_prallax .txt {

        text-align: center;

    }



    #sec3 .box .text h2 {

        margin: 0 auto 29px auto;

        width: 89px;

    }



    #sec3 .photo-slide {

        width: 450px;

        margin: auto;

    }

}



@media screen and (max-width: 999px) {

    header h1 {

        margin-top: 20px;

    }



    #sec1 {

        margin: 30px 0 50px;

    }



    #sec1 h2 {

        margin-bottom: 30px;

    }



    #sec1 .box {

        margin-left: 0;

        margin-right: 0;

        padding: 7% 3% 10%;

    }



    #sec1 .box:after {

        width: 10vw;

        height: 5vw;

    }



    #sec1 .box h3 {

        margin-bottom: 5%;

    }



    #sec1 .box .txt {

        text-align: justify;

    }



    #sec2 .bg_prallax .txt {

        padding: 5% 5%;

    }



    #sec2 .set1 {

        padding: 30px 0 50px;

    }



    #sec2 .set1 .slide2 {

        display: block;

    }



    #sec2 .set1 .slide2 .item {

        width: auto;

    }



    #sec2 .set1 .slide2 .item .photo {

        line-height: 0;

    }



    #sec2 .set1 .slide2 .item h3 {

        font-size: 6vw;

    }



    #sec2 .set1 .slide2 .item .txt {

        padding: 5%;

    }



    #sec2 .slick-list {

        overflow: visible;

    }



    #sec2 .slick-dots {

        display: flex;

        justify-content: center;

        margin-top: 5%;

    }



    #sec2 .slick-dots li {

        margin: 0 5px;

    }



    #sec2 .slick-dots li button {

        width: 50px;

        height: 10px;

        font-size: 0;

        background: transparent;

        border: 2px solid #f33b3b;

        cursor: pointer;

        border-radius: 10px;

    }



    #sec2 .slick-dots .slick-active button {

        background: #f33b3b;

    }



    #sec3 .content {

        display: block;

    }



    #sec3 .photo {

        display: block;

        width: auto;

    }



    #sec3 .photo>p {

        align-self: center;

        margin: 0 auto;

    }



    #sec3 .box {

        width: auto;

        padding-top: 150px;

        margin-top: -50px;

    }



    #sec3 .box .text {

        width: auto;

        margin: 0 auto;

        padding: 0 5% 50px;

    }



    #sec3 .box .text h2 {

        margin-bottom: 30px;

        text-align: center;

        padding: 0 5% 0 0;

    }



    #sec3 .btn__ {

        margin: 20px 0 0 0;

        padding: 0;

    }

}



@media screen and (max-width: 1080px) and (min-width: 980px) {

    #sec1 .box {

        margin: 0;

    }



    #sec2 .set1 .slide2 {

        justify-content: center;

    }



    #sec2 .set1 .slide2 .item {

        margin: 0 10px;

    }



    #sec3 .btn__ {

        margin: 0;

    }



    #sec3 .btn__ img {

        width: 100%;

        height: auto;

    }

}



@media screen and (max-width: 768px) {

    /* 既存のコードに以下を追加 */



    #sec2 .bg_prallax .img_parallax {

        position: relative;

        clip: auto;

        padding: 0;

        min-height: 300px;

        /* 必要に応じて調整 */

    }



    #sec2 .bg_prallax .img_parallax img {

        position: absolute;

        height: 100%;

        object-fit: cover;

    }



    #sec2 .txt {

        padding: 30px 10px 30px;

    }



}