@charset "UTF-8";

#lp05 {
    width: 100%;
    margin: 0;
    padding: 0;
}
#lp05 img {
    width: 100%;
}
#lp05 .midashi h6 {
    text-align: left;
    margin: 0;
    padding: 0;
}
#lp05 .midashi h6 img {
    width: 100%;
    max-width: 500px;
}
#lp05 p {
    line-height: 200%;
}
#lp05 h2 {
    line-height: 180%;
    font-size: 110%;
}
@media (max-width: 768px) {
    #lp05 .midashi h6 img {
        width: 90%;
        max-width: 420px;
        margin-bottom: 1rem;
    }
}

/* MV */
#lp05 .mv {
    width: 100%;
    height: 34vw;
    background: url(../../images/d-on/lp05/mvpc.jpg) left center no-repeat;
    background-size: cover;
    margin: 0;
    padding: 0;
    position: relative;
}
#lp05 .mv .wrap-xl {
    position: relative;
    z-index: 1;
    height: 100%;
}
#lp05 .mv .float-cnt {
    position: absolute;
    top: 50%;
    right: 0;
    padding-right: 10%;
    z-index: 2;
    color: #fff;
    transform: translateY(-50%);
}
#lp05 .mv img {
    max-width: 450px;
}
#lp05 .mv p {
    margin: 30px 0 10px;
    padding: 0;
}
#lp05 .pc {
    display: block;
}
#lp05 .sp {
    display: none;
}
@media (max-width: 1200px) {
    #lp05 .mv img {
        max-width: 320px;
    }
    #lp05 .tb {
        display: block;
    }
    br.pc {
        display: none!important;
    }
}
@media (max-width: 768px) {
    #lp05 .mv2 {
        width: 100%;
        height: 100%;
        background-image: none;
        margin: 0;
        padding: 0;
        position: relative;
        color: #fff;
    }
    #lp05 .mv2 .float-cnt {
        position: absolute;
        width: 100%;
        margin: 0;
        bottom: 4vw;
        padding: 1rem 4% 0;
    }
    #lp05 .mv2 img {
        max-width: 100%;
    }
    #lp05 .mv2 .float-cnt p {
        margin: 0;
        padding: 0;
    }
    #lp05 .mv2 .float-cnt img {
        width: 90%;
        max-width: 480px;
        margin-bottom: 1.5rem;
    }
    #lp05 .tb {
        display: block;
    }
    #lp05 .pc {
        display: none;
    }
    #lp05 .sp {
        display: block;
    }
}

/* DESC */
#lp05 .backouter {
    background: #30302E;
    margin: 0;
    padding: 8rem 0;
}
#lp05 div.descouter {
    width: 100%;
    margin: 0;
    padding: 0;
}
#lp05 div.descouter p {
    margin: 20px 0 0;
    font-weight: normal;
}
#lp05 div.descouter dl {
    margin: 0;
    padding: 0;
    display: flex;
    align-self: center;
    align-items: center;
    align-content: center;
    flex-wrap: wrap;
    justify-content: space-between;
    position: relative;
}
#lp05 div.descouter dd {
    width: 60%;
    margin: 0;
    padding: 0;
    position: absolute;
    top: 0;
    left: -20%;
}
#lp05 div.descouter dt {
    width: 48%;
    z-index: 2;
    position: relative;
    margin: 2% 0 0 50%;
    padding: 0 0 0 4rem;
    color: #fff;
}
#lp05 div.descouter dt h4 {
    line-height: 180%;
}
#lp05 div.descouter dt .midashi h6 img {
    max-width: 430px!important;
}
@media (max-width: 1200px) {
    #lp05 .backouter {
        margin: 0;
        padding: 4rem 0 4rem;
    }
    #lp05 div.descouter {
        padding: 0;
    }
    #lp05 div.descouter dt {
        padding: 2rem 0 8rem 2rem;
    }
    #lp05 div.descouter .img {
        margin-top: 4rem;
    }
}
@media (max-width: 768px) {
    #lp05 .backouter {
        padding: 4rem 0 0;
    }
    #lp05 div.descouter {
        padding: 0 0 4rem;
    }
    #lp05 div.descouter p {
        margin: 15px 0 0;
    }
    #lp05 div.descouter dl {
        margin: 0;
        padding: 0;
        flex-wrap: wrap;
    }
    #lp05 div.descouter dt {
        width: 100%;
        margin: 2rem 0 0;
        padding: 0 4%;
    }
    #lp05 div.descouter dd {
        width: 100%;
        margin: 0;
        padding: 0 4% 0 0;
        position: static;
    }
    #lp05 div.descouter .img {
        margin-top: 3rem;
    }
}

#lp05 div.descouter h4, 
#lp05 div.descouter2 h4, 
#lp05 div.descouter3 h4 {
    margin: 0;
    padding: 0;
}

/* DESC */
#lp05 div.descouter2 {
    width: 100%;
    margin: -6% 0 0;
    padding: 0; 
}
#lp05 div.descouter2 dl {
    position: relative;
    width: 100%;
    margin: 0;
    padding: 0;
    display: flex;
    align-self: center;
    align-items: center;
    align-content: center;
    flex-wrap: wrap;
    justify-content: space-between;
    z-index: 3;
}
#lp05 div.descouter2 dd {
    width: 30%;
    margin: 0 0 0 28%;
    padding: 0;
    max-width: 250px;
}
@media (max-width: 1200px) {
    #lp05 div.descouter2 {
        margin: -20rem 0 0;
    }
    #lp05 div.descouter2 dl {
        margin: 0;
        padding: 0 3rem;
    }
    #lp05 div.descouter2 dd {
        width: 30%;
        margin: 0 0 0 20%;
        padding: 0;
        max-width: 250px;
    }
}
@media (max-width: 768px) {
    #lp05 div.descouter2 {
        margin: 0;
        padding: 0; 
    }
    #lp05 div.descouter2 h6 {
        margin-bottom: 0;
    }
    #lp05 div.descouter2 p {
        margin: 15px 0 0;
    }
    #lp05 div.descouter2 dl {
        margin: 0;
        padding: 0;
    }
    #lp05 div.descouter2 dt {
        width: 100%;
        margin: 3rem 4% 0;
        padding: 0;
        font-weight: normal;
    }
    #lp05 div.descouter2 dd {
        width: 100%;
        margin: 0;
        padding: 0;
    }
}

/* DESC */
#lp05 div.descouter3 {
    width: 100%;
    margin: 6rem 0;
    padding: 0; 
}
#lp05 div.descouter3 p {
    margin: 20px 0 0;
}
#lp05 div.descouter3 .bd {
    border-left: 1px solid #000;
    padding-left: 4rem;
}
#lp05 div.descouter3 dl {
    margin: 0;
    padding: 0;
    display: flex;
    align-self: center;
    align-items: center;
    align-content: center;
    flex-wrap: wrap;
    justify-content: space-between;
}
#lp05 div.descouter3 dt {
    width: 46%;
    margin: 0;
    padding: 0;
    font-weight: normal;
}
#lp05 div.descouter3 dd {
    width: 50%;
    margin: 0;
    padding: 0;
}
@media (max-width: 1200px) {
    #lp05 div.descouter3 {
        margin: 4rem 0;
    }
    #lp05 div.descouter3 dl {
        margin: 0;
        padding: 0 3rem;
    }
}
@media (max-width: 768px) {
    #lp05 div.descouter3 {
        margin: 0;
        padding: 4rem 0 4rem; 
    }
    #lp05 div.descouter3 .bd {
        border-left: none;
        padding-left: 0;
    }
    #lp05 div.descouter3 h6 {
        margin-bottom: 0;
        padding-left: 4%;
    }
    #lp05 div.descouter3 h4 {
        padding-left: 4%;
    }
    #lp05 div.descouter3 p {
        margin: 15px 0 0;
        border-left: 1px solid #000;
        padding-left: calc(4% - 1px);
    }
    #lp05 div.descouter3 dl {
        margin: 0;
        padding: 0;
    }
    #lp05 div.descouter3 dt {
        width: 100%;
        margin: 2rem 4% 0;
        padding: 0;
        font-weight: normal;
    }
    #lp05 div.descouter3 dd {
        width: 100%;
        margin: 0;
        padding: 0 4%;
    }
}
/* DETAIL */
#lp05 #midashiimg {
    margin: 0;
    padding: 0;
    text-align: center;
    background: #DDDDDD;
}
#lp05 div.detailouter {
    width: 100%;
    margin: 0;
    padding: 0;
    background: #DDDDDD; 
}
#lp05 section.detail {
    margin: 0;
    padding: 6rem 0;
}
#lp05 section.detail h6 img {
    max-width: 750px;
}
#lp05 section.detail ul {
    margin: 0;
    padding: 0;
    display: flex;
    align-self: flex-start;
    align-items: flex-start;
    align-content: flex-start;
    flex-wrap: wrap;
    justify-content: space-between;
}
#lp05 section.detail ul li {
    list-style: none;
    margin: 3rem 0 0;
    padding: 0;
    width: 30.25%;
    text-align: center;
}
@media (max-width: 1200px) {
    #lp05 div.detailouter {
        padding: 3rem 0;
    }
    #lp05 section.detail {
        margin: 0;
        padding: 6rem 3rem;
    }
}

@media (max-width: 768px) {
    #lp05 div.detailouter {
        width: 100%;
        margin: 0;
        padding: 3rem 4%;
    }
    #lp05 section.detail {
        margin: 0;
        padding: 1rem 0 0;
    }
    #lp05 section.detail ul {
        margin: -3% 0 0;
        flex-wrap: wrap;
    }
    #lp05 section.detail ul li {
        list-style: none;
        margin: 20px 0 10px;
        width: 47%;
    }
    #lp05 section.detail h6 {
        text-align: center;
        width: 100%;
    }
    #lp05 section.detail h6 img {
        width: 100%;
        max-width: 100%;
    }
    #lp05 section.detail ul li p {
        text-align: left;
        margin: 1rem 0 0;
        padding: 0;
        font-size: 85%;
    }
}
/* PICK UP */
#lp05 #pickupouter {
    background: #FFFFFF;
    padding: 6rem 5rem;
    color: #000;
}
#lp05 section.pickup {
    margin: 0;
    padding: 0;
}
#lp05 section.pickup ul {
    margin: 2rem 0 0;
    padding: 0;
    display: flex;
    align-self: flex-start;
    align-items: flex-start;
    align-content: flex-start;
    flex-wrap: wrap;
    justify-content: space-between;
}
#lp05 section.pickup ul li {
    list-style: none;
    margin: 0;
    padding: 0;
    width: 23%;
}
#lp05 section.pickup ul li p {
    margin: 0;
    padding: 0;
    text-align: center;
    font-size: 0.8125rem;
    color: #000;
}
#lp05 section.pickup ul li img {
    margin-bottom: 20px;
}
#lp05 section.pickup ul li a {
    display: block;
    color: #fff;
    width: 90%;
    background: #000;
    margin: 15px auto 0;
    padding: 6px 8px 8px;
    font-size: 0.8125rem;
    text-align: center;
}
@media (max-width: 1200px) {
    #lp05 #pickupouter {
        padding: 3rem 0;
    }
    #lp05 section.pickup {
        padding: 5rem 3rem;
    }
    #lp05 section.pickup ul li p {
        text-align: left;
    }
}
@media (max-width: 768px) {
    #lp05 #pickupouter {
        padding: 0;
    }
    #lp05 #pickupouter {
        padding: 4rem 0;
    }
    #lp05 #pickupouter h6 {
        text-align: left;
    }
    #lp05 #pickupouter h6 img {
        width: 100%;
        max-width: 360px;
        margin: 0;
    }
    #lp05 section.pickup {
        width: 92%;
        margin: 0 auto;
        padding: 0;
    }
    #lp05 section.pickup ul {
        margin: 0;
    }
    #lp05 section.pickup ul li {
        margin: 20px 0;
        width: 47%;
    }
    #lp05 section.pickup ul li a {
        width: 100%;
    }
}

.page-top-mark {
    z-index: 6;
}

.footer {
    padding-top: 0;
}