@charset "utf-8";
/*==================================================
アニメーション
===================================*/


/* fadeUp */

.fadeUp {
    animation-name: fadeUpAnime;
    animation-duration: 0.7s;
    animation-fill-mode: forwards;
    opacity: 0;
}

@keyframes fadeUpAnime {
    from {
        opacity: 0;
        transform: translateY(100px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* スクロールをしたら出現　*/

.fadeUpTrigger {
    opacity: 0;
}

/* アニメーション遅延時間*/

.delay-time02 {
    animation-delay: 0.2s;
}

.delay-time04 {
    animation-delay: 0.4s;
}

.delay-time06 {
    animation-delay: 0.6s;
}

.delay-time08 {
    animation-delay: 0.8s;
}

.delay-time10 {
    animation-delay: 1.0s;
}

.delay-time12 {
    animation-delay: 1.2s;
}

.delay-time14 {
    animation-delay: 1.4s;
}

.delay-time16 {
    animation-delay: 1.6s;
}

.delay-time18 {
    animation-delay: 1.8s;
}


/*========= 共通レイアウト ===============*/



.sp_only {
    display: none !important;

}

.wrapper1 {
    overflow: hidden;
    text-align: center;
        font-family: yu-gothic-pr6n, sans-serif;
font-style: normal;
    font-feature-settings: "palt";
        background: #eeeee3;

}

.flex {
    display: flex;
    justify-content: space-between
}

a {
    text-decoration: none;
}



/*========= ヘッダー ======*/

header {
    background: #eeeee3;
    width: 100%;

}

.topimage {
    width: 100%;
}

.topimage img {
    width: 100%;
}


/*========= Intro ===============*/
.intro {
    padding: 70px 0 150px 0;
    text-align: center;
    width: 100%;
    overflow: hidden;
    font-size: 14px;
    line-height: 32px;
}

.read {
    color: #444444;
    font-size: 18px;
}


.maintittle {
    color: #444444;
    font-size: 34px;
    letter-spacing: 2px;
    line-height: 40px;
    font-weight: 800;
    text-align: center;
    margin-bottom: 30px;
}




/*========= section1 ===============*/

#section1 {
    background: #eeeee3;
}

#section1 .tittle {
    margin-bottom: 30px;
}


.photoarea {
    width: 1200px;
    height: 1500px;
    margin: 0 auto;
    position: relative;

}

.area1 {
    width: 500px;
    left: 600px;

    position: absolute;
}

.photo1 {
    width: 100%;
}

.area1 .caption {
    position: absolute;
    top: 770px;
    right: 0px;
    z-index: 1;
    width: 418px;
}

.area2 {
    width: 500px;
    left: 100px;
    position: absolute;
    text-align: start;

}

.area3 {
    position: absolute;
    width: 400px;
    top: 710px;
    left: 0px;

}

.photo2 {
    width: 400px;
}



.area4 {
    top: 900px;
    left: 465px;
    position: absolute;
}



.area4 .caption {
    position: absolute;
    bottom: 0px;
    right: -65px;

}

.read2 {
    font-size: 34px;
    letter-spacing: 2px;
    line-height: 40px;
    font-weight: 800;
    text-align: start;
    margin-bottom: 20px;

}

.textarea {
    width: 420px;
    position: absolute;
    top: 200px;
    left: 100px;
}


.text2 {
    font-size: 18px;
    text-align: start;
    line-height: 30px;
    margin-bottom: 40px;
}


.creditline {
    width: 420px;
}

.itemname {
    color: #000;

}

.creditlist {
    font-size: 16px;
    width: 280px;
    margin-top: 20px;
}

.buy {
    width: 68px;
    color: #000;
    border: 1px solid #000;
    border-color: #000;
    letter-spacing: 0.1em;
    line-height: 20px;
}

.creditlist li {
    margin-bottom: 10px;
}

.orange {
    color: #e68237;
}

.buy_orange {
    width: 68px;
    color: #e68237;
    border: 1px solid #e68237;
    border-color: #e68237;
    letter-spacing: 0.1em;
    line-height: 20px;
}

.itemcredit {
    width: 767px;
    margin: 75px auto 100px;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

.contentsline {
    width: 1200px;
}

/*========= section2 ===============*/

#section2 {
    margin-top: 100px;
}

#section2 .tittle {
    margin-bottom: 30px;
}


.photoarea2 {
    width: 1200px;
    height: 1650px;
    margin: 0 auto;
    position: relative;

}

.area5 {
    width: 600px;
    left: 0px;

    position: absolute;
}

.photo4 {
    width: 100%;
}

.area5 .caption {
    position: absolute;
    top: 920px;
    left: 0px;
    width: 385px;
}

.area6 {
    width: 500px;
    right: 0px;
    position: absolute;
    text-align: start;

}

.area7 {
    position: absolute;
    width: 400px;
    top: 780px;
    right: 0px;

}

.photo5 {
    width: 400px;
}


.photo6 {
    width: 400px;
}

.area8 {
    top: 1050px;
    left: 325px;
    position: absolute;
}

.area8 .caption {
    position: absolute;
    bottom: 0px;
    left: -75px;

}



.textarea2 {
    width: 410px;
    position: absolute;
    top: 250px;
    left: 700px;
}


.blue {
    color: #3c6ebe;
}

.buy_blue {
    width: 68px;
    color: #3c6ebe;
    border: 1px solid #3c6ebe;
    border-color: #3c6ebe;
    letter-spacing: 0.1em;
    line-height: 20px;
}

.itemcredit2 {
    width: 767px;
    margin: 50px auto 100px;

}

/*========= section3 ===============*/

#section3 {
    margin-top: 120px;

}

#section3 .tittle {
    margin-bottom: 30px;
}


.photoarea3 {
    width: 1200px;
    height: 1500px;
    margin: 0 auto;
    position: relative;

}

.area9 {
    width: 500px;
    left: 600px;

    position: absolute;
}

.photo7 {
    width: 100%;
}

.area9 .caption {
    position: absolute;
    top: 770px;
    right: 0px;
    width: 418px;
}

.area10 {
    width: 500px;
    left: 100px;
    position: absolute;
    text-align: start;

}

.area11 {
    position: absolute;
    width: 400px;
    top: 730px;
    left: 0px;

}


.area12 {
    top: 900px;
    left: 465px;
    position: absolute;
}



.area12 .caption {
    position: absolute;
    bottom: 0px;
    right: -65px;

}


.green {
    color: #32785a;
}

.buy_green {
    width: 68px;
    color: #32785a;
    border: 1px solid #32785a;
    border-color: #32785a;
    letter-spacing: 0.1em;
    line-height: 20px;
}

.caption2 {
    text-align: start;
}

.itemcredit3 {
    width: 767px;
    margin: 75px auto 100px;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

.credit {
    padding-bottom: 50px;

}

.staff {
    font-size: 20px;
    margin-bottom: 0px;
}

.credit p {
    line-height: 25px;
}


/*==================================================
スマホ
===================================*/

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

    body {
        overflow-x: hidden;
        overflow-y: scroll;
        max-width: 100%;


    }


    .pc_only {
        display: none !important;
    }

    .sp_only {
        display: block !important;
    }


    /*========= SPヘッダー ======*/

    header {
        width: 100%;


    }

    .topimage {
        width: 100%;
        margin: 0px 0px;

    }



    /*========= SPIntro ===============*/


    .intro {
        padding: 50px 0 80px 0;
        text-align: center;
        width: 100%;
        overflow: hidden;
        font-size: 15px;
        line-height: 32px;

        color: darkslategray;
    }

    .read {
        font-size: 18px;
        width: 90%;
        margin: 0 auto;
        text-align: start;

    }


    .maintittle {
        font-size: 1.5rem;
        letter-spacing: 2px;
        line-height: 1.9rem;
        text-align: center;
        margin-bottom: 40px;
    }

    /*========= SPsection1 ===============*/
    #section1 {}

    #section1 .tittle {
        margin-bottom: 30px;
    }


    .photoarea {
        width: 100%;
        height: auto;
        margin: 0 auto;
        position: static;


    }

    .area1 {
        width: 90%;
        margin: 0 5%;
        position: static;
    }

    .photo1 {
        width: 100%;
    }

    .area1 .caption {
        position: static;
        width: 90%;
        margin-top: 5%;
    }

    .area2 {
        width: 90%;
        position: static;
        text-align: center;
        margin: 0 5%;

    }

    .tittle {
        width: 50%;
    }

    .read2 {
        font-size: 20px;
        letter-spacing: 2px;
        line-height: 30px;
        font-weight: 800;
        text-align: center;
        margin-bottom: 20px;

    }



    .area3 {
        position: static;
        width: 64%;
        margin-top: 10%;
        margin-left: 36%;

    }

    .photo2 {
        width: 100%;
    }



    .area4 {
        width: 64%;
        margin-top: 5%;
        margin-right: 31%;
        margin-left: 5%;
        position: static;
        display: flex;
    }

    .photo3 {
        width: 100%;
    }



    .area4 .caption {

        width: 12%;
        left: 105%;
    }




    .textarea {
        width: 90%;
        position: static;
        margin: 5%
    }


    .text2 {
        font-size: 18px;
        text-align: static;
        line-height: 30px;
        margin-bottom: 40px;
    }


    .creditline {
        width: 100%;
    }


    .creditlist {
         font-size: 16px;
        width: 85%;
        margin-top: 20px;
        padding-left:0;
        
    }

    .buy {
        width: 68px;
        color: #000;
        border: 1px solid #000;
        border-color: #000;
        letter-spacing: 0.1em;
        line-height: 20px;
    }

    .creditlist li {
        margin-bottom: 10px;
         list-style:none
       
    }


    .buy_orange {
        width: 68px;
        color: #e68237;
        border: 1px solid #e68237;
        border-color: #e68237;
        letter-spacing: 0.1em;
        line-height: 20px;
    }

    .itemcredit {
        width: 90%;
        margin: 10% auto 0;
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
    }

    .item1,
    .item2,
    item3,
    item4,
    item5 {
        width: 90%;
    }



    .contentsline {
        width: 95%;
        margin-top: 10%;
        margin-bottom: 10%;
        margin-left: 2.5%;

    }

    /*========= SPsection2 ===============*/

    #section2 {
        margin-top: 10%;
    }

    #section2 .tittle {
        margin-bottom: 30px;
    }


    .photoarea2 {
        width: 100%;
        height: auto;
        margin: 0 auto;
        position: static;

    }

    .area5 {
        width: 90%;
        margin: 0 5%;
        position: static;
    }

    .photo4 {
        width: 100%;
    }

    .area5 .caption {
        position: static;
        width: 90%;
        margin-top: 5%;
    }

    .area6 {
        width: 90%;
        position: static;
        text-align: center;
        margin: 0 5%;

    }

    .area7 {
        position: static;
        width: 69%;
        margin-top: 10%;
        margin-left: 26%;
        margin-right: 5%;

    }

    .photo5 {
        width: 100%;
    }


    .photo6 {
        width: 100%;
    }

    .area8 {
        width: 69%;
        margin-top: 5%;
        margin-right: 31%;
        position: static;
        display: flex;
    }

    .area8 .caption {
        width: 12%;
        left: 105%;

    }



    .textarea2 {
        width: 90%;
        position: static;
        margin: 5%
    }



    .buy_blue {
        width: 68px;
        color: #3c6ebe;
        border: 1px solid #3c6ebe;
        border-color: #3c6ebe;
        letter-spacing: 0.1em;
        line-height: 20px;
    }

    .itemcredit2 {
        width: 90%;
        margin: 10% auto 0;

    }

    .item3 {
        width: 50%;
    }

    /*========= SPsection3 ===============*/

    #section3 {
        margin-top: 50px;
    }

    #section3 .tittle {
        margin-bottom: 30px;
    }


    .photoarea3 {
        width: 100%;
        height: auto;
        margin: 0 auto;
        position: static;

    }

    .area9 {
        width: 90%;
        margin: 0 5%;
        position: static;
    }


    .area9 .caption {
        position: static;
        width: 90%;
        margin-top: 5%;
    }

    .area10 {
        width: 90%;
        position: static;
        text-align: center;
        margin: 0 5%;
    }

    .area11 {
        position: static;
        width: 64%;
        margin-top: 10%;
        margin-left: 36%;
    }

    .photo8 {
        width: 100%;
    }


    .area12 {
        width: 64%;
        margin-top: 5%;
        margin-right: 36%;
        position: static;
        display: flex;
    }

    .photo9 {
        width: 100%;
    }



    .area12 .caption {
        width: 12%;
        left: 100%;
        margin-left: 10px;

    }

    .itemcredit3 {
        width: 90%;
        margin: 10% 7% 0 3%;

    }

    .item4 {
        width: 90%;
    }

    .item5 {
        width: 90%;
        margin-left: 10%
    }



    .credit {
        margin-top: 20%;
        padding-bottom: 50px;

    }



}