@charset = "utf-8";

/************************************
/design デザイン一覧
************************************/
#main.under h2 a{
    color: #333;
}

#article .chocolat-parent{
    display: block;
}


/****************************
#design_block デザイン
****************************/
#design_block{}

#design_block .design_button_block{
    padding: 0 1.5625vw;
    margin: 0 auto 3.75vw;
}

#main #article .nav-buttons.flex {
    justify-content: center;
    gap: 3.125vw;
}

.button_bg_white{
    background: #fff;
    color: #333;
    border: 1px solid #333;
}

.button_bg_black{
    background: #000;
    color: #fff;
    border: 1px solid #000;
}

.button_bg_gray{
    background: #333;
    color: #fff;
    border: 1px solid #333;
}

.button_bg_yellow{
    background: #f1d723;
    color: #333;
    border: 1px solid #f1d723;
}

.button_bg_red{
    background: #e71418;
    color: #fff;
    border: 1px solid #e71418;
}

.button_bg_blue{
    background: #121c3b;
    color: #fff;
    border: 1px solid #121c3b;
}

.button_bg_white{
    background: #fff;
    color: #333;
    border: 1px solid #333;
}

.button_bg_light-blue{
    background: #0098e7;
    color: #fff;
    border: 1px solid #0098e7;
}

.term-logo .design-all-btn,
.term-logo2 .design-all-btn{
    background: #fff;
    color: #333;
    border: 1px solid #333;
}

.term-illust .design-all-btn,
.term-illust2 .design-all-btn{
    background: #fff;
    color: #333;
    border: 1px solid #333;
}

.term-character .design-all-btn,
.term-character2 .design-all-btn{
    background: #fff;
    color: #333;
    border: 1px solid #333;
}

.term-logo .design-logo-btn,
.term-logo2 .design-logo-btn{
    background: #000;
    color: #fff;
    border: 1px solid #000;
}

.term-illust .design-illust-btn,
.term-illust2 .design-illust-btn{
    background: #000;
    color: #fff;
    border: 1px solid #000;
}

.term-character .design-character-btn,
.term-character2 .design-character-btn{
    background: #000;
    color: #fff;
    border: 1px solid #000;
}

.design_button{
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    box-sizing: border-box;
    width: 15.625vw;
    height: 3.75vw;
    border-radius: 1.875vw;
    padding: 10px;
    font-weight: normal;
    font-size: 1.375vw;
    line-height: 1.2;
    letter-spacing: 0;
}

.design_bg_gray{
    background: #efefef;
}

.article_archive_block{
    padding-top: 3.75%;
    padding-bottom: 3.75%;
    margin-top: 7%;
    margin-bottom: 3.75%;
}

.design_block{
    
}

#main #article .design_block.flex{
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 5.9375vw;
}

#main #article .article_archive_block main.design_block{
    width: 100%;
}

.design_block article{
    width: calc(100% / 3 - 3.9583vw);
}

#main #article .detail_flex{
    flex-wrap: nowrap;
}

#main #article .title_text h2{
    text-align: left;
    color: #333;
    font-weight: bold;
    margin: 15px auto;
    font-size: 1.9vw;
    letter-spacing: 0;
    line-height: 1.5;
}

.detail_text{
    color: #333;
    font-weight: bold;
    font-size: 1.0vw;
    letter-spacing: 0;
    line-height: 1.37;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.article_numbering{
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 6.25vw;
    height: 6.25vw;
    border-radius: 0 0 0 3.125vw;
    margin-left: 1.875vw;
}

.article_numbering p{
    color: #333;
    font-weight: bold;
    font-size: 2.28125vw;
    letter-spacing: 0;
    line-height: 1.1;
}

.design_bg_block{
    text-align: center;
    background: url(../img/design_bg01.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    padding: 8.75vw 0 17.8125vw;
    box-sizing: border-box;
    width: 92.5vw;
    height: 40.625vw;
    margin: 0 auto;
}

.design_bg_head{
    margin-bottom: 3.593vw;
}

#main.under .design_bg_head h3{
    font-weight: normal;
    color: #333;
    margin-bottom: 0;
    font-size: 2.25vw;
    letter-spacing: .1em;
    line-height: 1.1;
}

.design_bg_link{
    margin: 3.593vw 0 2.03vw;
}

.design_bg_link .cmn_button a{
    width: 25vw;
    height: 5vw;
    max-width: 800px;
    padding: 10px;
    border-radius: 100vmax;
    font-size: 2vw;
    line-height: 1.1;
    letter-spacing: .05em;
}

.design_bg_detail{}

.design_bg_detail p{
    font-weight: bold;
    color: #333;
    font-size: 1.125vw;
    letter-spacing: .05em;
    line-height: 1.2;
}

@media screen and (max-width:480px){
    .article_archive_block{
        padding-top: 8%;
        padding-bottom: 8%;
        margin-top: 13%;
        margin-bottom: 7%;
    }

    #main #article .design_block.flex{
        gap: 10vw;
    }

    .design_block article{
        width: calc(100% / 2 - 5vw);
    }

    #main #article .title_text h2{
        margin: 10px auto;
        font-size: 3.5vw;
    }

    .detail_text{
        font-size: 2.1vw;
        line-height: 1.4;
    }

    .article_numbering{
        min-width: 10vw;
        height: 10vw;
        border-radius: 0 0 0 5vw;
        margin-left: 5px;
    }

    .article_numbering p{
        font-size: 3.5vw;
    }
    
    .design_bg_block{
        background-position: center;
        padding: 9vw 0 11vw;
        width: calc(100% - 7.5%);
        height: 50vw;
        border-radius: 20px;
    }

    .design_bg_head{
        margin-bottom: 5vw;
    }

    #main.under .design_bg_head h3{
        font-size: 4vw;
    }

    .design_bg_link{
        margin: 4vw 0 3vw;
    }

    .design_bg_link .cmn_button a{
        width: 50vw;
        height: 10vw;
        font-size: 3.5vw;
    }

    .design_bg_detail p{
        font-size: 2vw;
    }
}
/****************************
#design_block デザイン一覧
****************************/


/****************************
#design_block デザイン詳細
****************************/
#main .inner.single_design_bg_gray{
    background: #efefef;
    margin: 0;
    padding: 3.125vw 0;
}

.single_design_block{}

.single_design_block .single_w{
    width: 50vw;
    margin: 0 auto;
}

.single_post{
    margin: 3.125vw 0;
}

#main #article .single_flex{
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 2.03vw;
}

.single_numbering{
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 6.25vw;
    height: 6.25vw;
    border-radius: 0 0 3.125vw 0;
}

.single_numbering p{
    color: #333;
    font-weight: bold;
    font-size: 2.28125vw;
    letter-spacing: 0;
    line-height: 1.1;
}

.single_post .title_text{
    margin-left: 3.125vw;
}

#main.under .title_text h2{
    font-weight: bold;
    color: #333;
    font-size: 1.5vw;
    letter-spacing: 0;
    line-height: 1.1;
}

.single_detail_text{
    text-align: left;
    font-weight: bold;
    color: #333;
    font-size: 1.2vw;
    letter-spacing: .05em;
    line-height: 1.5;
    margin-bottom: 2.03vw;
}

@media screen and (max-width:480px){
    #main .inner.single_design_bg_gray{
        padding: 6vw 0;
    }

    .single_design_block .single_w{
        width: 80%;
    }

    .single_post{
        margin: 6vw 0;
    }

    #main #article .single_flex{
        margin-bottom: 5vw;
    }

    .single_numbering{
        min-width: 10vw;
        height: 10vw;
        border-radius: 0 0 6.3vw 0;
    }

    .single_numbering p{
        font-size: 3.2vw;
    }

    .single_post .title_text{
        margin-left: 5vw;
    }

    #main.under .title_text h2{
        font-size: 3.5vw;
    }

    .single_detail_text{
        font-size: 2.1vw;
        margin-bottom: 4vw;
    }
}
/****************************
#design_block デザイン詳細
****************************/

/************************************
/design デザイン
************************************/