@charset "UTF-8";

/* ==================
        common
===================== */
html{
font-size : 62.5%;
}

body{
    font-family: "Noto Serif JP", serif;
    font-style: normal;
    font-weight: 400;
    color: #202020;
    background-color: white;
    line-height: 1.5;

    width: 100%;
    max-width: 1920px;
    margin: 0 auto;
}

img{
    max-width: 100%;
    height: auto;
}

.topic{
    text-align: center;
    font-size: 2.5rem;
    font-weight: 600;
    line-height: 1.0;
}

.topic__deco{
    color: #C9DD9F;
    text-align: center;
    font-family: Allura;
    font-size: 5rem;
    line-height: 1.0;
}

/* レスポンシブPC */
@media screen and (min-width:769px) {
    .topic{
        font-size: 5rem;
    }

    .topic__deco{
        font-size: 10rem;
    }

    .notPc{
        display: none;
    }
}
/* レスポンシブPC-end */

/* ============================
        header
================================ */

.header{
    display: flex;
    width: 100%;
    height: 70px;
    background-color: white;
    padding: 0px 2.6%;
    justify-content: space-between;
    align-items: center;
}

.title{
    display: inline-block;
    width: 136.632px;
    height: auto;
}

.menu__btn{
    width: 40px;
    height: 40px;
    background-color: white;
    padding: 10px 2.6%;
    border-radius: 5%;
    box-sizing: content-box;
    position: fixed;
    top: 5px;
    right: 0;
    z-index: 10;
}

/* nav menu */
.nav{
    width: 100%;
    height: 100vh;
    background-color: rgba(255 ,255 ,255 ,0.9);

    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
    transform: translateX(100%);
    transition: 0.3s;
}

.nav__header{
    display: flex;
    width: 100%;
    height: 70px;
    background-color: white;
    padding: 0px 2.6%;
    justify-content: space-between;
    align-items: center;
}

.nav__logo{
    display: inline-block;
    width: 136.632px;
    height: 40px;
}

.close__btn{
    width: 40px;
    height: 40px;
}

.nav__item{
    text-align: center;
    margin-top: 30px;
}

.nav__item:first-of-type{
    margin-top: 100px;
}

.nav__item a{
    text-align: center;
    font-size: 2rem;
    font-weight: 500;
}

.active{
    transform: translateX(0);
    transition: 0.3s;
}

/* nav end */


/* レスポンシブPC */
@media screen and (min-width:769px) {
    .header{
        padding: 0 8.3% 0;
        margin: 0 auto;
    }

    .title{
        width: 170px;
    }

    .menu__btn{
        display: none;
    }

    .nav{
        position: static;
        transform: translateX(0);
        width: auto;
        height: auto;
    }

    .nav__header{
        display: none;
    }

    .nav__item{
        display: inline-block;
        margin: 0 0 0 30px;
    }

    .nav__item:first-of-type{
        margin: 0;
        display: none;
    }

    .nav__item a{
        text-decoration: underline #29332D;
    }
}
/* レスポンシブPC-end */


/* ======================
    article-header
========================= */
.article__header{
    height: 1033px;
    position: relative;
}


/* ---------- MV ------------ */
.article__header__img{
    width: 100%;
    max-width: 1920px;
    height: 100vh;
    position: fixed;
    top: 0;
    bottom: 0;
    z-index: -1000;
    background-size: cover;
    background-position: center center;

    /* アニメーション */
    animation: image-switch-animation 12s infinite;
    opacity: 0;
}

.mv1{
    background-image: url(../images/MV1.png);
    background-position-x: 65%;
    width: 100vw;
    overflow: hidden;
}

.mv2{
    background-image: url(../images/MV2.png);
    width: 100vw;
    overflow: hidden;
}

.mv3{
    background-image: url(../images/MV3.jpg);
    width: 100vw;
    overflow: hidden;
}

@keyframes image-switch-animation {
    0%{ opacity: 0;}
    25%{ opacity: 1;}
    35%{ opacity: 1;}
    45%{ opacity: 1;}
    55%{ opacity: 0;}
    100%{ opacity: 0;}
  }

.article__header__img:nth-of-type(1){
    animation-delay: 0s;
}

.article__header__img:nth-of-type(2){
    animation-delay: 4s;
}
.article__header__img:nth-of-type(3){
    animation-delay: 8s;
}
/* ------------- MV end --------------- */

/* ------------- Title --------------- */
.main__topic{
    margin: 0 auto;
    color: #3F2C15;
    writing-mode: vertical-rl;
    text-shadow: 0px 2px 4px rgba(61, 61, 61, 0.70);
    font-size: 4rem;
    font-weight: 700;
    line-height: 4.5rem;
    
    position: relative;
}

.main__topic__comment{
    color: #5F482D;
    text-shadow: 0px 2px 2px rgba(0, 0, 0, 0.25);
    font-size: 2rem;
    line-height: 1.0;
    
    border-radius: 5px;
    background: rgba(243, 241, 234, 0.70);
    padding: 10px 10px;
    
    position: absolute;
    top: 10px;
    right: -33px;
}

.main__topic__red{
    color: #C30D22;
    text-align: center;
    writing-mode: horizontal-tb;
    text-shadow: 0px 2px 2px rgba(0, 0, 0, 0.25);
    font-size: 2.2rem;
    line-height: 1.0;
    
    position: absolute;
    top: 45px;
    left: 10px;
}

.main__topic__title__br{
    border-radius: 5px;
    background: rgba(255, 243, 211, 0.80);
    padding: 10px 18px;
    
    position: absolute;
    bottom: 0;
    left: -68px;
}

.main__topic__title{
    display: inline-block;
    width: 80px;
    height: 450px;
    text-align: center;
    border-radius: 5px;
    background: rgba(255, 243, 211, 0.80);
    padding: 30px 18px 15px 22px;
    margin: 25px auto 20px;
}
/* ------------- Title end --------------- */

.main__caption{
    border-radius: 5px;
    background: rgba(255, 243, 211, 0.60);
    text-align: center;
    text-shadow: 0px 0px 6px rgba(255, 255, 255, 0.30);
    font-size: 1.4rem;
    margin: 20px 0;
    padding: 10px 0 110px;
}
.main__caption__red{
    color: #C41327;
}

.mainBtn__sp{
    display: block;
    width: 340px;
    height: auto;
    margin: -135px auto 0;
}

.mainBtn__pc{
    display: none;
}

@media screen and (min-width:550px) {
    .article__header{
        height: 1133px;
    }
}


/* レスポンシブPC */
@media screen and (min-width:769px) {
    .article__header{
        display: flex;
        height: 1440px;
    }
    
    .main__topic{
        font-size: 7.5rem;
        margin: 40px auto 40px 25%;
    }

    .main__topic__title{
        width: auto;
        height: auto;
        padding: 50px 32px 40px 34px;
        margin: 40px auto 0;
    }

    .main__topic__comment{
        top: 20px;
    }

    .main__topic__red{
        font-size: 3.5rem;
        top: 50px;
        left: 0px;
        width: 120px;
    }

    .main__topic__title__br{
        padding: 20px 32px 20px 34px;
        left: -100px;
        bottom: 530px;
    }

    .caption-btn{
        padding-right: 6%;
        width: 48%;
    }

    .main__caption{
        width: 100%;
        font-size: 1.8rem;
        line-height: 2.0;
        margin-top: 100px;
        padding: 10px 7%;
    }

    .mainBtn__sp{
        display: none;
    }

    .mainBtn__pc{
        display: block;
        width: 61.6%;
        margin: 50px auto 0;
    }
}
/* レスポンシブPC-end */


/* ======================
    reason
========================= */

.reason{
    width: 100%;
    background-color: white;
    position: relative;
    z-index: -10;
}

.reason__topic__deco{
    width: 100%;
    height: 100px;

    position: relative;
}

.reason__topic__deco::after{
    content: '';
    background-color: white;
    width: 100%;
    height: 300%;

    position: absolute;
    top: 0;
    left: 0;
    transform: skewY(-20deg);
    transform-origin: top left;
    z-index: -10;
}

.reason__topic{
    display: block;
    max-width: 375px;
    margin: 0 auto;
    transform: translateY(-30px) rotate(-20deg);
}

.reason__deco{
    transform: rotate(10deg);
    position: absolute;
    top: -40px;
    right: 0;
    z-index: -1;
}

.reason__underline{
    display: block;
    width: 360px;
    height: 150px;
    object-fit: cover;
    object-position: bottom;
    margin: -100px auto 0;
}

/* ------------- 横並びreason -------------- */
.area{
    position: relative;
    width: 100vw;
    height: 1000px;
    overflow: hidden;
}

.reason__contents{
    display: flex;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
}

.reason__item{
    background-color: white;
    width: 100%;
    height: 100vh;
    object-fit: cover;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    position: relative;
}

.reason__item__upImg{
    position: absolute;
    top: 150px;
    left: 40%;
    transform: translateX(-50%);
    width: 200px;
    height: 200px;
    object-fit: cover;
}

.reason__item__downImg{
    position: absolute;
    bottom: 150px;
    left: 60%;
    transform: translateX(-50%);
    width: 200px;
    height: 200px;
    object-fit: cover;
    z-index: 1;
}

.reason__item__topic{
    text-align: center;
    font-size: 2rem;
    font-weight: 700;
    margin-top: -25px;
}

.reason__item__txt{
    display: block;
    width: 100%;
    text-align: center;
    font-size: 1.4rem;
    line-height: 1.8;
}

.point{
    color: #84b220;
    font-family: Allura;
    font-size: 5rem;
    line-height: 1.0;
    transform: rotate(-20deg) translateX(-10px) translateY(-50px);
    filter: drop-shadow(0 0 10px rgb(203, 232, 206));
    position: relative;
    z-index: 100;
}

.point__box{
    position: absolute;
    top: 50%;
    left: 50%;
    width: 80%;
    transform: translate(-50%,-50%);
    z-index: 100;
}

.reason__item::before{
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    z-index: 50;
    width: 540px;
    height: 300px;
    background-color: rgba(255,255,255,0.8);
    filter: blur(15px);
}
/* 横並びend */


/* レスポンシブPC */
@media screen and (min-width:769px) {
    .reason__topic__deco{
        height: 300px;
    }

    .reason__topic{
        max-width: 680px;
    }

    .reason__deco{
        top: -70px;
    }

    .reason__underline{
        width: 700px;
        height: 280px;
        margin: -140px auto 0;
    }

    .area{
        height: 1500px;
    }

    .reason__item img{
        width: 400px;
        height: 400px;
    }

    .point{
        text-align: center;
        font-size: 10rem;
        transform: rotate(-20deg) translateX(-250px) translateY(-60px);
    }

    .reason__item__topic{
        font-size: 2.5rem;
        position: relative;
        z-index: 1;
    }

    .reason__item__txt{
        margin-top: 18px;
        font-size: 1.6rem;
        line-height: 2;
        position: relative;
        z-index: 1;
    }

    .reason__item:last-of-type{
        padding-bottom: 0;
    }

    .reason__item::before{
        content: '';
        position: absolute;
        top: 52%;
        left: 50%;
        transform: translate(-50%,-50%);
        z-index: 50;
        width: 540px;
        height: 300px;
        background-color: rgba(255,255,255,0.8);
        filter: blur(15px);
    }

}
/* レスポンシブPC-end */


/* =======================
    Line Up
======================== */
.lineUp{
    margin-top: 0px;
}

.lineUp__topic__deco{
    background: #A7CA5D;
    position: relative;
    width: 100%;
    height: 80px;
}

.lineUp__topic__deco::before{
    content: "";
    width: 100%;
    height: 1500%;
    background-color: white;

    position: absolute;
    top: -1500%;
    left: 0;
    z-index: -50;
}

.lineUp__topic__deco::after{
    content: '';
    background-color:#A7CA5D;
    width: 100%;
    height: 650%;

    position: absolute;
    top: 0;
    left: 0;
    transform: skewY(20deg);
    transform-origin: top right;
    z-index: -9;
}

.lineUp__topic{
    line-height: 1;
    position: relative;
    z-index: 1;
}

.lineUp__topic__red{
    color: #492424;
}

.topic__comment{
    display: inline-block;
    font-size: 1.6rem;
    line-height: 1.2;

    margin-bottom: 5px;
    position: relative;
}

.topic__comment__deco{
    width: 42px;
    height: auto;

    position: absolute;
    top: -13px;
    left: 10px;
}

.lineUp__topic__back{
    position: absolute;
    bottom: 10px;
    left: 0;
    right: 0;
    width: 357px;
    margin: 0 auto;
}

.lineUp__deco{
    display: block;
    rotate: -20deg;
    position: absolute;
    top: -50px;
    right: 62%;
    z-index: 1;
}

.lineUp__item{
    width: 100%;
    text-align: center;
    margin: 40px auto 0;
    position: relative;
}

.lineUp__item__img{
    display: block;
    width: 80%;
    height: auto;
    margin: 0 auto 10px;
    
}

.lineUp__item__topic{
    font-size: 2.5rem;
    font-weight: 600;
    padding: 20px 0 10px;

    background-image: url(../images/lineUp_underline.png);
    background-repeat: no-repeat;
    background-size: 200px 60px;
    background-position:  50% top;
}

.lineUp__set{
    font-size: 2rem;
    font-weight: 500;
}

.manufacturer{
    font-size: 1.4rem;
    font-weight: 500;
}

.money{
    font-size: 1rem;
    font-weight: 500;
}

.yen{
    font-size: 1.5rem;
}

.num{
    font-size: 3rem;
}

.lineUp__btn{
    width: 340px;
    height: auto;
}

.lineUp__item::after{
    content: '';
    background-color: #A7CA5D;
    width: 100%;
    height: 90%;
    position: absolute;
    bottom: 60px;
    left: 0;
    z-index: -8;
    transform: skewY(20deg);
    transform-origin: bottom left;
}

.lineUp__item:last-of-type{
    margin-top: 100px;
    background-color: rgba(0,0,0,0);
}

.lineUp{
    position: relative;
}

.lineUp::after{
    content: "";
    display: block;
    width: 100%;
    height: 80%;
    position: absolute;
    top: 30px;
    left: 0;
    z-index: -10;
    background-image: url(../images/lineUp_background_sp.jpg);
    background-size: 400% ;
}


/* レスポンシブPC */
@media screen and (min-width:769px) {
    .lineUp{
        margin-bottom: 200px;
    }

    .lineUp::after{
        background-image: url(../images/lineUp_background_pc.jpg);
        background-size: 100%;
    }

    .lineUp__topic__deco{
        height: 120px;
    }

    .lineUp__topic__deco::after{
        height: 500%;
        top: -100px;
        transform: skewY(10deg);
    }

    .lineUp__topic{
        width: 400px;
        margin: 0 auto;
    }

    .topic__comment{
        font-size: 2rem;
    }

    .topic__comment__deco{
        left: 0;
    }

    .lineUp__topic__back{
        width: 700px;
    }

    .lineUp__deco{
        top: -110px;
        right: 58%;
    }

    .lineUp__item{
        display: flex;
        gap: 8.3%;
        justify-content: space-between;
        margin-top: 50px;
        padding: 0 17.4% 0 8.3%;
    }

    .lineUp__item__img{
        width: 56%;
        height: auto;
        margin: 0;
        object-fit: contain;
    }

    .lineUp__flex{
        padding-top: 21px;
    }

    .lineUp__item__topic{
        font-size: 3.5rem;
        background-size: 260px auto;
        background-position: 50% bottom;
    }

    .lineUp__set{
        font-size: 2.5rem;
        margin-top: 14px;
    }
    
    .manufacturer{
        font-size: 1.5rem;
        margin-top: 11px;
    }

    .money{
        margin-top: 22px;
    }
    
    .lineUp__btn{
        width: 340px;
        height: auto;
    }

    .lineUp__item:first-of-type::after{
        content: '';
        background-color: #A7CA5D;
        width: 100%;
        height: 90%;
        position: absolute;
        bottom: 120px;
        left: 0;
        z-index: -8;
        transform: skewY(10deg);
        transform-origin: bottom left;

    }

    .lineUp__item:last-of-type{
        margin-top: 250px;
        flex-direction: row-reverse;
        padding: 0 8.3% 0 17.4%;
    }

    .lineUp__item:last-of-type::after{
        content: '';
        background-color: #A7CA5D;
        width: 100%;
        height: 120%;
        position: absolute;
        bottom: 30px;
        left: 0;
        z-index: -8;
        transform: skewY(10deg);
        transform-origin: bottom left;
    }
}
/* レスポンシブPC-end */


/* ===================-
    Q&A
======================== */
.question{
    background-color: white;
    position: relative;
    z-index: -11;
    margin-top: 130px;
}

.question::before{
    content: "";
    position: absolute;
    top: -40px;
    right: 0;
    left: 0;
    margin: 0 auto;
    width: 270px;
    height: 200px;
    background-image: url(../images/question.png);
    background-position: 5% 0%;
    background-repeat: no-repeat;
    background-size: auto 120px;
    z-index: -10;
}

.question::after{
    content: "";
    background-color: white;
    width: 100%;
    height: 100%;
    position: absolute;
    top: -300px;
    left: 0;
    z-index: -12;
}

.question__topic__deco{
    width: 270px;
    margin: 0 auto;
    position: relative;
    z-index: 0;
}

.question__deco{
    position: absolute;
    top: -30px;
    right: 20px;
    rotate: 10deg;
    z-index: -1;

}

.question__contents{
    max-width: 340px;
    margin: 0 auto;
    padding-bottom: 100px;
    background-image: url(../images/question_background_sp.png),url(../images/question_background_sp.png);
    background-size: 340px auto;
    background-position: top,50% 69%;
    background-repeat: no-repeat,no-repeat;
}

.question__item{
    margin:50px 9.8% 10px;
    padding-top: 50px;
    font-size: 1.6rem;
}

.question__item:last-of-type{
    padding-top: 80px;
}

.question__a{
    color: #DB1F1F;
    font-size: 1.6rem;
    margin: 0 9.8%;
}

.question__a-txt{
    font-size: 1.4rem;
    margin: 0 9.8% 0;
}


/* レスポンシブPC */
@media screen and (min-width:769px) {
    .question__topic__deco{
        width: 300px;
    }

    .question__deco{
        top: -50px;
        right: -100px;
    }

    .question::before{
        width: 500px;
        background-size: auto 180px;
        background-position: 0 0;
    }

    .question__item{
        font-size: 2.5rem;
    }

    .question__a{
        font-size: 2.5rem;
    }

    .question__a-txt{
        font-size: 1.6rem;
    }

    .question__contents{
        max-width: 1000px;
        background-image: url(../images/question_background_pc.png),url(../images/question_background_pc.png);
        background-size: 1000px auto;
        background-position: 50% 3%,50% 70%;
    }
}
/* レスポンシブPC-end */


/* ===================
    review
===================== */
.review{
    width: 100%;
    overflow: hidden;
    position: relative;
}

.review::before{
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    margin: 0 auto;
    z-index: -5;
    background-color:#deb887;
}

.review::after{
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    margin: 0 auto;
    z-index: -1;
    background-image: url(../images/reviewBackground_sp.jpg);
    background-repeat: no-repeat;
    background-size: 375px auto;
    background-position: 50% 0%;
}

.review__topic__deco{
    width: 100%;
    height: 120px;
    background-color: rgba(255,255,255,0.5);
    position: relative;
}

.review__topic__deco::after{
    content: "";
    width: 375px;
    height: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50% ,-50%);

    background-image: url(../images/comment-left.png),url(../images/comment-right.png),url(../images/review_titleLine_sp.png),url(../images/review_titleLine_sp.png);
    background-repeat: no-repeat,no-repeat,no-repeat,no-repeat;
    background-size:47px auto , 40px auto,34px auto,34px auto;
    background-position: left top 10px,right top 10px,left,right;
    }

.review__topic .topic__comment{
    margin-top: 22px;
    font-size: 1.4rem;
}

.review__topic{
    line-height: 1.5;
}

.review__contents{
    width: 375px;
    height: auto;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    position: relative;
    overflow: hidden;
}

.review__letter{
    width: 109%;
    height: 289px;
    rotate: 12deg;
    box-sizing: border-box;
}
.review__letter:nth-of-type(1){
    margin-top: 50px;
    padding:60px 0 0 55px ;
}
.review__letter:nth-of-type(2){
    rotate: -12deg;
    margin-top: 35px;
    padding: 40px 0 0 40px;
}
.review__letter:last-of-type{
    width: 106%;
    height: 564px;
    rotate: 5deg;
    margin:50px 0 30px;
    writing-mode: vertical-rl;

    position: relative;
}


.letter__txt:first-of-type{
    margin-top: 10px;
}


.letter__topic-2{
    text-align: center;
}

.letter__txt:nth-of-type(2){
    margin-top: 20px;
}


.letter__topic-3{
    text-indent: 3rem;
    position: absolute;
    top: 50px;
    right: 50px;
}

.letter__name-3{
    position: absolute;
    bottom: 170px;
    left: 60px;
    -webkit-text-orientation: upright;
    text-orientation: upright;
}


.letter__topic{
    color: #000;
    font-family: "Zen Kurenaido" , serif;
    font-size: 1.6rem;
}

.letter__txt{
    color: #000;
    font-family: "Zen Kurenaido";
    font-size: 1.2rem;
    line-height: 1.7;
    text-decoration-line: underline;
}

.letter__txt-3{
   position: absolute;
   top: 100px;
   right: 90px;
   text-decoration: none;
   line-height: 2.5;
}

.letter__name{
    color: #000;
    font-family: "Zen Kurenaido";
    font-size: 1.2rem;
    line-height: 1.7;
    text-align: right;
    margin-right: 50px;
}
    

/* レスポンシブPC */
@media screen and (min-width:769px) {
    .review{
        height: 2228px;
    }

    .review__topic__deco{
        width: 100%;
        height: 260px;
    }

    .review__topic .topic__comment{
        font-size: 2rem;
    }

    .review__topic{
        line-height: 1.2;
        padding-top: 50px;
    }

    .review__topic__deco::after{
        width: 1440px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50% ,-50%);

        background-image: url(../images/comment-left.png),url(../images/comment-right.png),url(../images/review_titleLine_pc.png),url(../images/review_titleLine_pc.png);
        background-repeat: no-repeat,no-repeat,no-repeat,no-repeat;
        background-size:70px auto , 64px auto,400px auto,400px auto;
        background-position: 32% 55px,68% 53px,left,right;
    }

    .review__contents{
        width: 1440px;
        height: 1968px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        overflow: hidden;
    }

    /* letter common */
    .review__letter{
        width: 780px;
        height: 560px;
        rotate: 6deg;
    }

    .letter__topic{
        font-size: 2.5rem;
    }
    
    .letter__txt{
        font-size: 1.6rem;
        line-height: 2.3;
    }

    .letter__name{
        font-size: 1.6rem;
    }
    
    /* letter 1 */
    .review__letter:first-of-type{
        position: absolute;
        top: 220px;
        left: 100px;
        margin: 0;
        padding: 130px 120px 120px;
    }

    .letter__txt:first-of-type{
        margin-top: 10px;
    }

    /* letter 2 */
    .review__letter:nth-of-type(2){
        position: absolute;
        top: 740px;
        right: 100px;
        rotate: -7deg;
        margin-top: 0;
        padding: 100px;
    }

    .letter__txt:nth-of-type(2){
        margin-top: 30px;
    }


    /* letter 3 */
    .review__letter:last-of-type{
        width: 560px;
        position: absolute;
        top: 1350px;
        left: 200px;
        rotate: 8deg;
        margin:0;
    }
       
    .letter__name-3{
        position: absolute;
        bottom: 120px;
        left: 100px;
    }
      
    .letter__txt-3{
       position: absolute;
       top: 100px;
       right: 110px;
       text-decoration: none;
       line-height: 2.5;
    }
    
    .review::after{
        width: 100%;
        height: 100%;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        z-index: -1;
        background-image: url(../images/reviewBackground_pc.jpg);
        background-repeat: no-repeat;
        background-size: 1440px auto;
        background-position: 50% 0%;
    }
    
}
/* レスポンシブPC-end */


/* ====================== 
    Line Up 下 
=========================  */
.lineUp__bottom{
    margin-bottom: 0;
    padding-bottom: 50px;
}

.lineUpB__topicBack{
    background-color: #A7CA5D;
    width: 100%;
    height: 200px;
}

.lineUpB__topic__deco{
    padding: 100px 0 100px;
    position: relative;
    width: 375px;
    height: 80px;
    margin: 0 auto  ;
    background-image: url(../images/pyonpyon.png),url(../images/lineUp_background.png);
    background-size: 43px auto ,300px auto;
    background-repeat: no-repeat, no-repeat;
    background-position: 36% 48%,50% 72%;
}

.lineUpB__topic{
    line-height: 1;
    position: relative;
    z-index: 1;
}

.topicB__comment{
    display: inline-block;
    font-size: 1.6rem;
    line-height: 1.2;

    margin-bottom: 5px;
    position: relative;
}

.lineUpB__deco{
    display: block;
    rotate: -20deg;
    position: absolute;
    top: 70px;
    left: 10px;
    z-index: 1;
}

.lineUpB__item{
    text-align: center;
    position: relative;
}

.lineUpB__item::after{
    content: '';
    background-color: #A7CA5D;
    width: 100%;
    height: 90%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -8;
    transform: skewY(20deg);
    transform-origin: bottom left;
}

.lineUpB__item:first-of-type::before{
    content: '';
    background-color: #A7CA5D;
    width: 100%;
    height: 50%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -8;
}

.lineUpB__item:last-of-type:after{
    content: '';
    background-color: #A7CA5D;
    width: 100%;
    height: 130%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -8;
    transform: skewY(20deg);
    transform-origin: top left;
}

.lineUpB__item:last-of-type::before{
    content: '';
    background-color: #A7CA5D;
    width: 100%;
    height: 50%;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: -8;
}

.lineUpB__item:last-of-type{
    margin-top: 100px;
    background-color: rgba(0,0,0,0);
}


/* レスポンシブPC */
@media screen and (min-width:769px) {
    .lineUp__bottom{
        padding-bottom: 100px;
    }

    .lineUpB__topicBack{
        height: 300px;
        padding-top: 30px;
    }

    .lineUpB__topic__deco{
        width: 800px;
        height: 300px;
        padding: 120px 0 0;

        background-size: 43px auto ,700px auto;
        background-repeat: no-repeat, no-repeat;
        background-position: 29% 46%,50% 0%;
    }

    .lineUpB__topic{
        width: 400px;
        margin: 0 auto;
    }

    .topicB__comment{
        font-size: 2rem;
    }

    .lineUpB__deco{
        top: 20px;
        right: 58%;
    }

    .lineUpB__item{
        display: flex;
        gap: 8.3%;
        justify-content: space-between;
        margin-top: 50px;
        padding: 0 17.4% 0 8.3%;
    }

    .lineUpB__item:first-of-type::after{
        content: '';
        background-color: #A7CA5D;
        width: 100%;
        height: 200%;
        position: absolute;
        top: -500px;
        left: 0;
        z-index: -8;
        transform: skewY(10deg);
        transform-origin: bottom left;

    }

    .lineUpB__item:last-of-type{
        margin-top: 250px;
        flex-direction: row-reverse;
        padding: 0 8.3% 0 17.4%;
    }

    .lineUpB__item:last-of-type::after{
        content: '';
        background-color: #A7CA5D;
        width: 100%;
        height: 155%;
        position: absolute;
        top: -100px;
        left: 0;
        z-index: -8;
        transform: skewY(10deg);
        transform-origin: bottom left;
    }
}
/* レスポンシブPC-end */


/* ================
    footer
================== */

.article__footer{
    background-color:white;
    height: 375px;
    text-align: center;
}

.footer__logo{
    width: 136px;
    margin: 0 auto;
    padding-top: 30px;
}

.article__footer .nav__menu .nav__item{
    margin-top: 30px;
}

.copy{
    text-align: center;
    padding: 30px;
    background-color: white;
}

/* レスポンシブPC */
@media screen and (min-width:769px) {
    .footer__logo{
        width: 170px;
        margin: 0 0 0 87px;
    }

    .article__footer ul li{
        display: block;
        margin-left: 145px;
        text-align: start;
    }

    .article__footer ul li:first-of-type{
        display: block;
        margin-left: 145px;
    }

}
/* レスポンシブPC-end */