@charset "UTF-8";

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

/* MV */
#lp22 .mv {
    width: 100%;
    height: 33.75vw;
    background: url(../../images/d-on/lp22/mvpc.jpg) left center no-repeat;
    background-size: cover;
    margin: 0;
    padding: 0;
    position: relative;
}
#lp22 .mv .wrap-xl {
    position: relative;
    z-index: 1;
    height: 100%;
}
#lp22 .mv .float-cnt {
    position: absolute;
    top: 50%;
    left: 0;
    padding-right: 6%;
    z-index: 2;
    color: #282C52;
    transform: translateY(-50%);
}
#lp22 .mv img {
    max-width: 620px;
}
#lp22 .mv p {
    margin: 0;
    padding: 0;
}
#lp22 .mv p.text {
    font-size: 105%;
}
#lp22 .pc {
    display: block;
}
#lp22 .sp {
    display: none;
}
@media (max-width: 1200px) {
    #lp22 .mv img {
        max-width: 320px;
    }
    #lp22 .tb {
        display: block;
    }
    br.pc {
        display: none!important;
    }
    #lp22 .mv .float-cnt {
        left: 3rem;
    }
    #lp22 .mv img {
        max-width: 300px;
    }
}
@media (min-width: 769px) {
  #lp22 .backouter {
      background:  #282C52;
      color: #fff;
      margin: 0;
      padding: 6.5rem 0;
    }
}
@media (max-width: 768px) {
  #lp22 .backouter {
      background: #282C52;
      color: #fff;
      margin: 0;
      padding: 6.5rem 0;
    }
    #lp22 .mv2 {
        width: 100%;
        height: 100%;
        background-image: none;
        margin: 0;
        padding: 0;
        position: relative;
        text-align: center;
        color: #282C52;
    }
    #lp22 .mv2 .float-cnt {
        position: absolute;
        width: 100%;
        margin: 0;
        top: 5%;
        text-align: center;
        padding: 0 4%;
    }
    #lp22 .mv2 img {
        max-width: 100%;
    }
    #lp22 .mv2 .float-cnt p {
        margin: 0;
        padding: 0;
    }
    #lp22 .mv2 .float-cnt img {
        width: 100%;
        max-width: 480px;
    }
    #lp22 .mv2 p.text {
        font-size: 110%;
        line-height: 160%;
    }
    #lp22 .tb {
        display: block;
    }
    #lp22 .pc {
        display: none;
    }
    #lp22 .sp {
        display: block;
    }
}

/* DESC */
/*#lp22 .backouter {
    background: linear-gradient(to left, #fff, #D9974F);
    color: #fff;
    margin: 0;
    padding: 6.5rem 0;
}*/
#lp22 div.descouter {
    width: 100%;
    margin: 0;
    padding: 0;
}
#lp22 div.descouter p {
    margin: 0;
    font-weight: normal;
}
#lp22 .reverse {
    flex-direction: row-reverse;
}
#lp22 .right {
    text-align: right!important;
}
#lp22 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;
}
#lp22 div.descouter dd {
    width: 50%;
    margin: 0;
    padding: 0;
}
#lp22 div.descouter dt {
    width: 50%;
    margin: 0;
    padding: 0 4rem;
}
#lp22 div.descouter dt h4 {
    line-height: 180%;
}
#lp22 div.descouter dt .midashi h6 img {
    width: 100%;
    max-width: 100%;
}
@media (max-width: 1200px) {
    #lp22 .backouter {
        margin: 0;
        padding: 4rem 0 4rem;
    }
    #lp22 div.descouter {
        padding: 0 3rem;
    }
    #lp22 div.descouter dt {
        padding: 0 0 0 2rem;
    }
    #lp22 div.descouter .img {
        margin-top: 4rem;
    }
}
@media (max-width: 768px) {
    #lp22 .backouter {
        padding: 3rem 0;
    }
    #lp22 div.descouter {
        padding: 0;
    }
    #lp22 div.descouter p {
        margin: 20px 0 0;
    }
    #lp22 div.descouter dl {
        margin: 0;
        padding: 0;
        flex-wrap: wrap;
    }
    #lp22 div.descouter dt {
        width: 100%;
        margin: 2rem 0 0;
        padding: 0 4%;
        text-align: center;
    }
    #lp22 div.descouter dd {
        width: 100%;
        margin: 1rem 0 0;
        padding: 0 4%;
        position: static;
    }
    #lp22 div.descouter dd.irr {
        padding: 0 0 0 14%;
    }
    #lp22 div.descouter .img {
        margin-top: 3rem;
    }
}

#lp22 div.descouter h4,
#lp22 div.descouter2 h4,
#lp22 div.descouter3 h4 {
    margin: 30px 0px 30px;
    padding: 0;
}

/* DESC */
#lp22 div.descouter3 {
    width: 100%;
    margin: 0 0 8rem;
    padding: 0;
}
#lp22 div.descouter3 p {
    margin: 20px 0 0;
}
#lp22 div.descouter3 .bd {
    border-left: 1px solid #3B4C5D;
    padding-left: 3rem;
}
#lp22 div.descouter3 dl {
    margin: 6rem 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;
}
#lp22 div.descouter3 dt {
    width: 42%;
    margin: 0;
    padding: 6rem 0 0;
    font-weight: normal;
}
#lp22 div.descouter3 dd {
    width: 48.5%;
    margin: 0;
    padding: 0 0 2rem;
    position: relative;
    z-index: 1;
}
#lp22 div.descouter3 dd img.sub01 {
    position: absolute;
    left: -16rem;
    bottom: 0;
    z-index: 2;
    width: 50%;
}
#lp22 div.descouter3 dd img.sub02 {
    position: absolute;
    right: -16rem;
    bottom: 0;
    z-index: 2;
    width: 50%;
}
#lp22 div.descouter3 ul.images {
    margin: 4rem 0 0;
    padding: 0 0 4rem;
    display: flex;
    align-self: flex-start;
    align-items: flex-start;
    align-content: flex-start;
    flex-wrap: wrap;
    justify-content: space-between;
}
#lp22 div.descouter3 ul.images li {
    width: 48.5%;
}
#lp22 .blue{
    color: #282C52;
}
#lp22 .green {
    color: #282C52;
}
#lp22 .nobottom {
    padding-bottom: 0!important;
}
@media (max-width: 1200px) {
    #lp22 div.descouter3 {
        margin: 4rem 0;
        padding: 0;
    }
    #lp22 div.descouter3 dl {
        margin: 3rem 0;
        padding: 0 3rem;
    }
    #lp22 div.descouter3 dt {
        width: 42%;
        margin: 0;
        padding: 0;
        font-weight: normal;
    }
    #lp22 div.descouter3 dd img.sub01 {
        left: -6rem;
        width: 40%;
    }
    #lp22 div.descouter3 dd img.sub02 {
        right: -6rem;
        width: 40%;
    }
    #lp22 div.descouter3 ul.images {
        padding: 0 3rem 1rem;
    }
}
@media (max-width: 768px) {
    #lp22 div.descouter3 {
        margin: 0;
        padding: 1rem 0 3rem;
    }
    #lp22 div.descouter3 .bd {
        border-left: none;
        padding-left: 0;
    }
    #lp22 div.descouter3 h6 {
        margin-bottom: 0;
    }
    #lp22 div.descouter3 p {
        margin: 20px 0 0;
    }
    #lp22 div.descouter3 dl {
        margin: 1rem 0;
        padding: 0;
    }
    #lp22 div.descouter3 dt {
        width: 100%;
        margin: 0 4% 0;
        padding: 0;
        font-weight: normal;
    }
    #lp22 div.descouter3 dd {
        width: 100%;
        margin: 2rem 0 2rem 4%;
        padding: 0;
    }
    #lp22 div.descouter3 dl.reverse dd {
        margin: 2rem 4% 2rem 0;
    }
    #lp22 .mds {
        margin-top: 2rem;
    }
    #lp22 .right {
        text-align: left!important;
    }
    #lp22 div.descouter3 ul.images {
        margin: 1.5rem 0 0;
        padding: 0 0 1rem;
        display: flex;
        align-self: flex-start;
        align-items: flex-start;
        align-content: flex-start;
        flex-wrap: wrap;
        justify-content: space-between;
    }
}
/* DETAIL */
#lp22 div.detailouter {
    width: 100%;
    margin: 0;
    padding: 0;
    background: #282C52;
}
#lp22 section.detail {
    margin: 0;
    padding: 6rem 0;
    text-align: center;
}
#lp22 section.detail h6 {
    text-align: center;
}
#lp22 section.detail h6 img {
    width: 100%;
    max-width: 960px;
    margin: 0 auto;
}
#lp22 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;
}
#lp22 section.detail ul li {
    list-style: none;
    margin: 3rem 0 0;
    padding: 0;
    width: 30.25%;
    text-align: center;
    color: #fff;
}
#lp22 section.detail ul li p {
    margin-top: 15px;
}
@media (max-width: 1200px) {
    #lp22 div.detailouter {
        padding: 3rem 0;
    }
    #lp22 section.detail {
        margin: 0;
        padding: 6rem 3rem;
    }
}

@media (max-width: 768px) {
    #lp22 div.detailouter {
        width: 100%;
        margin: 0;
        padding: 2.5rem 4%;
    }
    #lp22 section.detail {
        margin: 0;
        padding: 1rem 0 0;
    }
    #lp22 section.detail ul {
        margin: 0;
        flex-wrap: wrap;
    }
    #lp22 section.detail ul li {
        list-style: none;
        margin: 20px 0 10px;
        width: 47%;
    }
    #lp22 section.detail h6 {
        text-align: center;
        width: 100%;
    }
    #lp22 section.detail h6 img {
        width: 100%;
        max-width: 100%;
    }
    #lp22 section.detail ul li p {
        text-align: left;
        margin: 1rem 0 0;
        padding: 0;
        font-size: 85%;
    }
}
/* PICK UP */
#lp22 #pickupouter {
    background: #FFF;
    padding: 6rem 3rem;
    color: #000;
}
#lp22 section.pickup {
    margin: 0;
    padding: 0;
}
#lp22 section.pickup h6 {
    text-align: center;
}
#lp22 section.pickup .midashi h6 img {
    width: 100%;
    max-width: 960px;
    margin-left: auto;
    margin-right: auto;
}
#lp22 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;
}
#lp22 section.pickup ul li {
    list-style: none;
    margin: 0;
    padding: 0;
    width: 23%;
}
#lp22 section.pickup ul li p {
    margin: 0;
    padding: 0;
    text-align: center;
    font-size: 0.8125rem;
    color: #000;
}
#lp22 section.pickup ul li img {
    margin-bottom: 18px;
}
#lp22 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) {
    #lp22 #pickupouter {
        padding: 3rem 0;
    }
    #lp22 section.pickup {
        padding: 5rem 3rem;
    }
    #lp22 section.pickup ul li p {
        text-align: center;
    }
}
@media (max-width: 768px) {
    #lp22 #pickupouter {
        padding: 0;
    }
    #lp22 #pickupouter {
        padding: 3rem 0;
    }
    #lp22 #pickupouter h6 {
        text-align: left;
    }
    #lp22 #pickupouter h6 img {
        width: 100%;
        max-width: 360px;
        margin: 0;
    }
    #lp22 section.pickup {
        width: 92%;
        margin: 0 auto;
        padding: 0;
    }
    #lp22 section.pickup ul {
        margin: 0;
    }
    #lp22 section.pickup ul li {
        margin: 20px 0;
        width: 47%;
    }
    #lp22 section.pickup ul li a {
        width: 100%;
    }
    #lp22 section.pickup ul li p {
        text-align: left;
    }
}

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

.footer {
    padding-top: 0;
}