@charset "utf-8";

/* CSS Document */


/*------ all ------*/
body {
    overflow-x: hidden;
}

.dh_lp_wrapper * {
    font-family: 'Noto Serif JP', serif;
    margin: 0;
}

.dh_lp_wrapper {
    width: 100%;
    max-width: 1096px;
    margin: 0px auto 136px;
    font-size: 14px;
    color: #222222;
    font-weight: 200;
    letter-spacing: 0.05em;
    line-height: 2;
    text-align: left;
}

.dh_lp_wrapper img {
    width: 100%;
    max-width: 100%;
}

.dh_lp_wrapper ul,
.dh_lp_wrapper li {
    margin: 0;
    padding: 0;
}

.dh_lp_wrapper h1,
.dh_lp_wrapper h2,
.dh_lp_wrapper h3,
.dh_lp_wrapper h4,
.dh_lp_wrapper h5,
.dh_lp_wrapper p,
.dh_lp_wrapper a {
    margin: 0;
    color: #444;
}

.dh_lp_wrapper a {
    text-decoration: none;
    font-family: 'メイリオ', 'Meiryo', 'ＭＳ ゴシック', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', sans-serif;
    text-decoration: underline;
}

.dh_lp_wrapper a,
.dh_lp_wrapper a img {
    text-decoration: none;
    transition-duration: 0.3s;
    cursor: pointer;
}

.dh_lp_wrapper a:hover,
.dh_lp_wrapper a:hover img {
    opacity: 0.8;
    text-decoration: none;
}

.dh_lp_wrapper a:link,
.dh_lp_wrapper a:visited,
.dh_lp_wrapper a:active,
.dh_lp_wrapper a:focus {
    text-decoration: none;
}


/*---------- top-sec ----------*/
.dh_lp_wrapper .top-sec {
    margin: 0 auto 111px;
}

.dh_lp_wrapper .top-sec h1 {
    margin: 0 auto 72px;
}

.dh_lp_wrapper .top-sec p {
    font-size: 16px;
    text-align: center;
}

.dh_lp_wrapper .top-sec h1 .pc {
    max-width: 1000px;
    margin-left: auto; 
    margin-right: auto;  
    display: block; 
}

/*---------- item-sec ----------*/
.dh_lp_wrapper h2 {
    font-size: 46px;
    font-family: "abril-display", serif;
    font-weight: 400;
    font-style: normal;
    text-align: left;
    margin: 0 auto -17px;
    color: #d2aca2;
    letter-spacing: 0.03em;
    -webkit-font-smoothing: antialiased;
}

.dh_lp_wrapper .coordinate-sec h2 {
    text-align: center;
}

.dh_lp_wrapper .item-sec {
    margin: 0 auto 100px;
}


.dh_lp_wrapper #item-03 {
    padding: 100px 0 0;
}

.dh_lp_wrapper #setup {
    background-color: #eaeef4;
    margin: 0 calc(50% - 50vw);
    padding: 100px calc(50vw - 50%);
}

.dh_lp_wrapper #plusone {
    background-color: #eaeef4;
    padding: 6% 11.5%;
    border-radius: 40px;
}

.dh_lp_wrapper .item-sec p {
    text-align: left;
}

.dh_lp_wrapper .item-sec .content-box03>p {
    text-align: center;
    margin: 0 auto 40px;
}
.dh_lp_wrapper .credit-area {
    margin-top: 21px;
}



.dh_lp_wrapper .credit-area p {
    font-family: 'メイリオ', 'Meiryo', 'ＭＳ ゴシック', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', sans-serif;
    margin: 0 auto;
}
.dh_lp_wrapper .credit-area .item_detail_text {
    font-size: 11px;
    font-weight: 600;
    line-height: 17px;
}
.dh_lp_wrapper .credit-area-detail p:not(.item_detail_text) {
    margin-bottom: -4px;
}
.dh_lp_wrapper .credit-area p.bottom_none {
    margin-bottom: 0;
    margin-top: -5px;
}
.dh_lp_wrapper .credit-area p.no_arrival {
    line-height: 22px;
}

.dh_lp_wrapper .content-box01 {
    margin: 0 auto;
}


.dh_lp_wrapper ul.item-area {
    display: flex;
    justify-content: space-between;
    align-items: center;
    column-gap: 40px;
}

.dh_lp_wrapper ul.item-area.flex-center {
    justify-content: center;
}

.dh_lp_wrapper ul.item-area.align-start {
    align-items: flex-start;
    margin-top: 41px;
}



.dh_lp_wrapper ul.item-area.reverse {
    flex-direction: row-reverse;
}

.dh_lp_wrapper ul.item-area li {
    width: calc((100% - 40px) / 2);
    width: 49%;
    max-width: 528px;
    position: relative;
}

.dh_lp_wrapper #plusone ul.item-area>li:nth-of-type(2) {
    width: 43%;
}

.dh_lp_wrapper ul.item-area li img {
    margin-top:-1px;
}

.dh_lp_wrapper #plusone ul.item-area li img {
    margin: 0;
}




.dh_lp_wrapper h4 {
    position: relative;
    z-index: 2;
    margin: -15px 0 20px;
    font-size: 32px;
}

.dh_lp_wrapper ul.item-area li ul.credit-area li {
    width: 100%;
}

.dh_lp_wrapper ul.item-area li ul.credit-area li p {
    text-align: left;
}


.dh_lp_wrapper small {
    line-height: 1.6;
    font-family: 'Noto Sans JP', sans-serif;
    color: #6f6f6f;
    font-weight: 400;
}

/*---------- fabric-sec ----------*/
.dh_lp_wrapper .fabric-sec {
    margin: 0 auto 140px;
    width: 90%;
    max-width: 850px;
}

.dh_lp_wrapper .fabric-sec h2 {
    font-size: 34px;
    font-style: italic;
}

.dh_lp_wrapper .fabric-sec .item-area {
    column-gap: 50px;
}

.dh_lp_wrapper .fabric-sec ul.item-area .fabric_img_box {
    max-width: 350px;
}

.dh_lp_wrapper .fabric-sec ul.item-area .fabric_text_box {
    width: calc(100% - 400px);
    max-width: unset;

}

/*---------- coordinate-sec ----------*/
.dh_lp_wrapper .coordinate-sec {
    margin: 0 auto 100px;
}

.dh_lp_wrapper .credit-area.credit-area-offset {
    margin-top: 15px; 
}

.dh_lp_wrapper h3{
    font-size: 30px;
    font-family: "ivyora-display", sans-serif;
    text-align: center;
    font-weight: 500;
    font-style: italic;
    color: #48b08d;
    margin-bottom:21px;
    margin-top: 12px;
}

.dh_lp_wrapper .coordinate-sec h2 {
    font-size: 42px;
    text-align: center;
    /* margin-bottom: 25px; */
    color: #48b08d;
}

.dh_lp_wrapper .coordinate-sec .sub_text {
    margin-bottom: 24px;
    margin-top:24px;
    text-align: center;
}


.dh_lp_wrapper .coordinate-sec .item_text {
    margin-bottom: -13px;
    margin-top:15px;
}

.dh_lp_wrapper .coordinate-sec:nth-of-type(2) {
    position: relative;
    top: 23px; 
}

/*---------- other-sec ----------*/
.dh_lp_wrapper .other-sec {
    margin: 148px auto 146px; 
    width: 90%;
    max-width: 890px;
}

.dh_lp_wrapper .other-sec h2 {
    font-size: 34px;
    text-align: center;
    margin-bottom: 10px;
    color: #48b08d;
}

.dh_lp_wrapper .other-sec .sub_text {
    text-align: center;
margin-bottom: 20px;

}

.dh_lp_wrapper .other-sec .item-area li {
    max-width: 425px;
    
}

.dh_lp_wrapper ul.item-area li.random {
    margin-top: 90px;
}

.dh_lp_wrapper .credit-area.credit-area-other02 {
    margin-top: 15px; 
}


.dh_lp_wrapper .other-sec .item-area-center {
    justify-content: center;
}
.dh_lp_wrapper .other-sec .item-area02 {
    margin-top: 50px;
}

.dh_lp_wrapper ul.item-area.item-area-main-center {
    justify-content: center; 
    gap: 20px; 
}

.dh_lp_wrapper ul.item-area.item-area-holiday-center {
    justify-content: center; 
    gap: 20px; 
}

.dh_lp_wrapper ul.item-area.item-area-holiday-center .credit-area {
    margin-top: 17px; 
}


.dh_lp_wrapper ul.item-area.item-area-main-center li,
.dh_lp_wrapper ul.item-area.item-area-holiday-center li {
    width: auto;
    max-width: 480px;
}

/*---------- btn_area ----------*/
.dh_lp_wrapper .btn_area {
    width: 100%;
    max-width: 744px;
    margin: 10% auto 15%;
}

.dh_lp_wrapper a.allitem_btn {
    text-align: center;
    display: block;
    text-decoration: none;
    line-height: 68px;
    font-size: 17px;
    font-weight: lighter;
    width: 100%;
    max-width: 685px;
    margin: 0 30px;
    color: #fff;
    letter-spacing: 1.6px;
    transition: 0.3s;
    background: #373434;
}

.dh_lp_wrapper a.allitem_btn:hover {
    opacity: 0.8;
}

.dh_lp_wrapper .item .text.two_clumn_area {
    font-size: 14px;
}

.dh_lp_wrapper .lp-btn {
    display: block;
    position: relative;
    width: 80%;
    max-width: 332px;
    color: #fff;
    background-color: #000;
    text-align: center;
    text-decoration: none;
    margin: 0 auto;
    font-family: "noto sans cjk-jp";
    height: 48px;
    line-height: 48px;
    margin-bottom: 20px;
    font-family: 'Noto Sans JP';
    font-weight: 500;
}

.dh_lp_wrapper .lp-btn:after {
    content: " ";
    color: #fff;
    position: absolute;
    top: 50%;
    right: 5%;
    width: 8px;
    height: 8px;
    border-top: 1px solid #fff;
    border-right: 1px solid #fff;
    transform: translate(-50%, -50%)rotate(45deg);
}

.dh_lp_wrapper .sales-info {
    text-align: center; 
    font-size: 14px; 
    margin-top: 40px; 
    margin-bottom: 15%;
}


@media screen and (max-width: 767px) {
    .dh_lp_wrapper {
        font-size: 13px;
    }
        .dh_lp_wrapper .item-sec {
            margin: 0 auto 70px;
        }

    .dh_lp_wrapper .sub_text {
        text-align: left;
        margin: 6% auto 6%;
    }



    .dh_lp_wrapper .top-sec h1 {
        margin: 0 auto 10%;
    }

    .dh_lp_wrapper .top-sec p {
        font-size: 14px;
        text-align: left;
    }

    .dh_lp_wrapper .top-sec {
        margin: 0 auto 15%;
    }


    .dh_lp_wrapper #setup {
        padding: 12% calc(50vw - 50%) 4%;
    }

    .dh_lp_wrapper #item-03 {
        padding: 12% 0 0;
    }


    .dh_lp_wrapper h2 {
        font-size: 42px;
        margin: 0 auto 7%;
        text-align: center;
    }
        .dh_lp_wrapper ul.item-area.align-start {
            row-gap: 30px;
        }

    .dh_lp_wrapper ul.item-area {
        flex-wrap: wrap;
    }

    .dh_lp_wrapper ul.item-area li {
        width: 100%;
        max-width: 100%;
    }



    .dh_lp_wrapper ul.item-area li img {
        margin: 0;
    }



    .dh_lp_wrapper ul.credit-area {
    }
        .dh_lp_wrapper .credit-area .item_detail_text {
            font-size: 10px;
        }

    .dh_lp_wrapper #plusone ul.credit-area {
        margin: 0;
    }

    .dh_lp_wrapper ul.credit-area li p {
        margin: 0;
    }

    .dh_lp_wrapper .flex-center img {
        margin: 0;
    }

    /*---------- fabric-sec ----------*/
        .dh_lp_wrapper .fabric-sec {
            margin: 0 auto 70px;
        }
        .dh_lp_wrapper .fabric-sec h2 {
            font-size: 30px;
        }

    .dh_lp_wrapper .fabric-sec ul.item-area .fabric_text_box {
        width: 100%;
    }

    /*---------- coordinate-sec ----------*/
        .dh_lp_wrapper .coordinate-sec {
            margin: 0 auto 8%;
        }
        .dh_lp_wrapper .coordinate-sec h2 {
            font-size: 38px;
        }

    .dh_lp_wrapper .coordinate-sec .sub_text {
        text-align: left;
    }

    .dh_lp_wrapper .sales-info {
        font-size: 10px; 
        margin-bottom: -30%;
    }

    /*---------- other-sec ----------*/
        .dh_lp_wrapper .other-sec {
            margin: 20% auto 70px;
        }
        .dh_lp_wrapper .other-sec h2 {
            font-size: 30px;
        }

    .dh_lp_wrapper .other-sec .sub_text {
        text-align: left;
    }

    .dh_lp_wrapper ul.item-area li.random {
    margin-top: -1%;
}

}




/*------ responsive tag ------*/

.pc {
    display: block !important;
}

.sp {
    display: none !important;
}

@media screen and (max-width: 767px) {
    .sp {
        display: block !important;
    }

    .pc {
        display: none !important;
    }
}