/*----------------------------------------
　　ciaocomitop  カラー定義　
----------------------------------------*/
.ciaocomitop{
    color:#000;
}
.date_today{
    color: red;
    border-bottom: 1px solid red;
}
/*----------------------------------------
　　ciaocomitop　> mainArea　
----------------------------------------*/
.ciaocomitop .mainArea{
    text-align:center;
    margin-bottom:20px;
}
.ciaocomitop .mainArea .dot{
    font-size:14px;
    color:#a5a5a5;
}
.ciaocomitop .mainArea .dot > span{
    font-size:16px;
    color:#92cfe2;
}
/*----------------------------------------
　　ciaocomitop　> category-menu　　
----------------------------------------*/
.ciaocomitop .category-menuBox{
    width: 100%;
    height:58px;
}
@media screen and (min-width:501px){
    .ciaocomitop .category-menuBox{
        width: 500px;
        height:63px; 
    }
}
.fixed {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 3;
  }
@media screen and (min-width:501px){
    .fixed {
        width: 500px;
    }
}
.ciaocomitop .category-menu ul li{
    list-style:none;
    width:calc(100% / 4);
    text-align: center;
}
.ciaocomitop .category-menu ul li:nth-child(1){
    background-color:#b4ebeb;
}
.ciaocomitop .category-menu ul li:nth-child(2){
    background-color:#c8b4eb;
}
.ciaocomitop .category-menu ul li:nth-child(3){
    background-color:#b6d4ff;
}
.ciaocomitop .category-menu ul li:nth-child(4){
    background-color:#ffa6c8;
}
.ciaocomitop .category-menu ul li a{
    text-decoration:none;
    display: inline-block;
    transform: skewX(-11deg);
    font-size: 100%;
    font-weight:500;
    color:#0f3778;
    line-height: 1.125;
    padding: 20px 0;
}
@media screen and (min-width:501px){
    .ciaocomitop .category-menu ul li a{
        font-size: 21px;
    }
}

/*----------------------------------------
　　ciaocomitop　> newArea　　
----------------------------------------*/
.ciaocomitop .newArea{
    margin-top: 9.333333333333334vw;
    margin-bottom: 16vw;
}
@media screen and (min-width:501px){
    .ciaocomitop .newArea{
        margin-top: 47px;
        margin-bottom: 78px;
    }
}
.ciaocomitop .newArea .catInner{
    padding: 0 5.333333333333333vw;
}
@media screen and (min-width:501px){
    .ciaocomitop .newArea .catInner{
        width: 446px;
        margin: 0 auto;
        padding: 0;
    }
}
.ciaocomitop .newArea .catInner .tit{
    width: 32.8vw;
    margin: 0 auto 2.6666666666666665vw;
}
@media screen and (min-width:501px){
    .ciaocomitop .newArea .catInner .tit{
        width: 164px;
        margin: 0 auto 15px;
    }
}
.ciaocomitop .newArea .catInner .lead{
    font-size: calc(28 / 750 * 100vw);
    line-height: 1.14;
    letter-spacing: 0.1em;
    text-align: center;
    margin-bottom: 5.333333333333333vw;
    font-weight: 500;
}
@media screen and (min-width:501px){
    .ciaocomitop .newArea .catInner .lead{
        font-size: 19px;
        margin-bottom: 30px;
    }
}
.ciaocomitop .newArea .catInner .contentBox{
    width: 41.86666666666667vw;
    margin-right: 5.333333333333333vw;
}
@media screen and (min-width:501px){
    .ciaocomitop .newArea .catInner .contentBox{
        width: 209px;
        margin-right: 28px;
    }
}
.ciaocomitop .newArea .catInner .contentBox .workImg{
    text-align: center;
}
.ciaocomitop .newArea .catInner .contentBox .workImg > img{
    width: auto;
    height: 48vw;
    margin: 2.6666666666666665vw auto 3.3333333333333335vw;
}
@media screen and (min-width:501px){
    .ciaocomitop .newArea .catInner .contentBox .workImg > img{
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        width: auto;
        height: 240px;
        margin: 13px auto 18px;
    }
}
.workImg.original::before{
    content: "";
    position: absolute;
    background-image: url(../../../img/ciao2021/ciaocomi/ciaocomi-original@2x.png);
    background-size: 12vw 12vw;
    top: -1.3333333333333335vw;
    right: 0vw;
    width: 12vw;
    height: 12vw;
    z-index: 1;
}
@media screen and (min-width:501px){
    .workImg.original::before{
        content: "";
        position: absolute;
        background-image: url(../../../img/ciao2021/ciaocomi/ciaocomi-original@2x.png);
        background-size: 60px 60px;
        top: -10px;
        right: 0;
        width: 60px;
        height: 60px;
        z-index: 1;
    }
}
.ciaocomitop .newArea .catInner .contentBox .workTit{
    font-size: calc(28 / 750 * 100vw);
    font-weight: 700;
    line-height: 1.357;
    margin-bottom: 1.3333333333333333vw;
}
@media screen and (min-width:501px){
    .ciaocomitop .newArea .catInner .contentBox .workTit{
        font-size: 19px;
        margin-bottom: 4px;
    }
}
.ciaocomitop .newArea .catInner .contentBox .authorName{
    font-size: calc(24 / 750 * 100vw);
    font-weight: 700;
    line-height: 1.416;
    color: #888;
    margin-bottom: 1.3333333333333333vw;
}
@media screen and (min-width:501px){
    .ciaocomitop .newArea .catInner .contentBox .authorName{
        font-size: 16px;
        margin-bottom: 4px;
    }
}
.ciaocomitop .newArea .catInner .contentBox .label {
    display: inline-flex;
    justify-content: start;
    flex-wrap: wrap;
}
.ciaocomitop .newArea .catInner .contentBox .label .label-name{
    margin-right: 1.3333333333333333vw;
    margin-bottom: 2.666666vw;
}
@media screen and (min-width:501px){
    .ciaocomitop .newArea .catInner .contentBox .label .label-name{
        margin-right: 10px;
        margin-bottom: 8px;
    }
}
.ciaocomitop .newArea .catInner .contentBox .label .label-name p {
    font-size: calc(24 / 750 * 100vw);
    font-weight: 700;
    line-height: 1.416;
    text-align: left;
    color: #333;
    display: inline-block;
    position: relative;
}
@media screen and (min-width:501px){
    .ciaocomitop .newArea .catInner .contentBox .label .label-name p {
        padding: 2px 14px;
        border-radius: 6.67px;
        font-size: 16px;
    }
}
.ciaocomitop .newArea .catInner .contentBox .label .blue p {
    display: inline-block;
    position: relative;
    padding: 0.6666666666666666vw 2.6666666666666665vw;
    border-radius: 1.3333333333333333vw;
    border: 1px solid #000;
    border-radius: 1.3333333333333333vw;
}
@media screen and (min-width:501px){
    .ciaocomitop .newArea .catInner .contentBox .label .blue p {
        display: inline-block;
        position: relative;
        padding: 2px 14px;
        border-radius: 6.67px;
        border: 1px solid #000;
        border-radius: 6.67px;
    }
}
.ciaocomitop .newArea .catInner .contentBox .label .label-name.blue p::before {
    position: absolute;
    top: 0.6666666666666666vw;
    right: -0.6666666666666666vw;
    width: 100%;
    height: 100%;
    content: "";
    background-color: #b6d4ff;
    border-radius: 1.3333333333333333vw;
    z-index: -1;
}
@media screen and (min-width:501px){
    .ciaocomitop .newArea .catInner .contentBox .label .label-name.blue p::before {
        position: absolute;
        top: 3px;
        right: -3px;
        background-color: #b6d4ff;
        border-radius: 6.67px;
        z-index: -1;
    }
}
.ciaocomitop .newArea .catInner .contentBox .caption{
    font-size: calc(22 / 750 * 100vw);
    line-height: 1.545;
    margin-bottom: 2vw;
}
@media screen and (min-width:501px){
    .ciaocomitop .newArea .catInner .contentBox .caption{
        font-size: 15px;
        margin-bottom: 4px;
    }
}
.ciaocomitop .newArea .catInner .contentBox a.btn{
    width: 41.86666666666667vw;
    height: 9.333333333333334vw;
    border-radius: 4.666666666666667vw;
    background-color: #fff;
    display: block;
    margin-top: auto;
    line-height: 9.333333333333334vw;
    font-size: calc(24 / 750 * 100vw );
    font-weight: 700;
    text-align: center;
}
@media screen and (min-width:501px){
    .ciaocomitop .newArea .catInner .contentBox a.btn{
        width: 209px;
        height: 46px;
        border-radius: 23.33px;
        background-color: #fff;
        display: block;
        line-height: 46px;
        font-size: 16px;
        font-weight: 700;
        text-align: center;
    }
}
.ciaocomitop .newArea .catInner .contentBox:nth-child(2n) {
    margin-right: 0;
}


/*----------------------------------------
　　ciaocomitop　> category　　
----------------------------------------*/
.ciaocomitop .category{
    position: relative;
    margin-bottom: 16vw;
}
@media screen and (min-width:501px){
    .ciaocomitop .category{
        margin-bottom: 80px;
    }   
}
.ciaocomitop .category::before {
    content: "";
    display: inline-block;
    background-image: url(../../../img/ciao2021/ciaocomi/bg_dot@2x.png);
    background-size: 50vw 12.533333333333333vw;
    width: 50vw;
    height: 12.533333333333333vw;
    position: absolute;
    top: -2.6666666666666665vw;
    right: 0;
    overflow: hidden;
    z-index: 0;
}
@media screen and (min-width:501px){
    .ciaocomitop .category::before {
        background-size: 330px 63px;
        width: 330px;
        height: 63px;
        top: -12px;
    }
}
.ciaocomitop .category .catInner{
    padding: 0 5.333333333333333vw;
}
@media screen and (min-width:501px){
    .ciaocomitop .category .catInner{
        width: 446px;
        margin: 0 auto;
        padding: 0;
    }   
}
.ciaocomitop .category .catInner .tit{
    position: relative;
    display: flex;
    align-items: center;
    margin-bottom: 2.6666666666666665vw;
    line-height:1;
}
@media screen and (min-width:501px){
    .ciaocomitop .category .catInner .tit{
        margin-bottom: 15px;
    } 
}
.ciaocomitop .category .catInner .tit::before{
    content: "";
    display: inline-block;
    width: 66.66666666666667vw;
    height: 13.333333333333334vw;
    position: absolute;
    left: -5.333333333333333vw;
    bottom: -10vw;
    z-index: -1;
}
.ciaocomitop #category01 .catInner .tit::before{
    background-color: #b4ebeb;
}
.ciaocomitop #category02 .catInner .tit::before{
    background-color: #c8b4eb;
}
.ciaocomitop #category03 .catInner .tit::before{
    background-color: #b6d4ff;
}
.ciaocomitop #category04 .catInner .tit::before{
    background-color: #ffa6c8;
}
@media screen and (min-width:501px){
    .ciaocomitop .category .catInner .tit::before{
        width: 333px;
        height: 66px;
        bottom: -50px;
    }  
}
.ciaocomitop .category .catInner .tit > img{
    width: 8.4vw;
    height: 7.866666666666666vw;
    margin-right: 4vw;
}
@media screen and (min-width:501px){
    .ciaocomitop .category .catInner .tit > img{
        width: 42px;
        height: 39px;
        margin-right: 15px;
    } 
}
.ciaocomitop .category .catInner .tit > p{
    font-size: calc(80 / 750 * 100vw);
    color: #0f3778;
    letter-spacing: 0.05em;
    display: inline-block;
    transform: skewX(-11deg);
    text-align: center;
}
@media screen and (min-width:501px){
    .ciaocomitop .category .catInner .tit > p{
        font-size: 53px;
    }
}
.ciaocomitop .category .catInner .lead{
    font-size: calc(28 / 750 * 100vw);
    line-height: 1.14;
    letter-spacing: 0.1em;
    font-weight: 500;
    margin-bottom: 4vw;
}
@media screen and (min-width:501px){
    .ciaocomitop .category .catInner .lead{
        font-size: 19px;
        margin-bottom: 30px;
    }
}

.ciaocomitop .category .catInner .contentBox {
    width: 41.86666666666667vw;
    margin-right: 5.333333333333333vw;
    margin-top: 6.666666666666667vw;
    align-items: start;
}
@media screen and (min-width:501px){
    .ciaocomitop .category .catInner .contentBox {
        width: 209px;
        margin-right: 28px;
        margin-top: 30px;
    }
}
.ciaocomitop .category .catInner .contentBox:nth-child(2n) {
    margin-right: 0;
}
.ciaocomitop .category .catInner .contentBox .date,
.ciaocomitop .category .catInner .contentBox .today{
    position: relative;
    font-size: calc(22 / 750 * 100vw);
    line-height: 1.545;
    font-weight: 700;
    padding-bottom: 0.6666666666666666vw;
    display: inline-block;
}
@media screen and (min-width:501px){
    .ciaocomitop .category .catInner .contentBox .date,
    .ciaocomitop .category .catInner .contentBox .today{
        font-size: 15px;
        padding-bottom: 2px;
    }
}
.ciaocomitop #category01 .catInner .contentBox .date{
    color: #5fcbd8;
    border-bottom: 1px solid #5fcbd8;
}
.ciaocomitop #category02 .catInner .contentBox .date{
    color: #9d65e9;
    border-bottom: 1px solid #9d65e9;
}
.ciaocomitop #category03 .catInner .contentBox .date{
    color: #71abff;
    border-bottom: 1px solid #71abff;
}
.ciaocomitop #category04 .catInner .contentBox .date{
    color: #fe7bac;
    border-bottom: 1px solid #fe7bac;
}
.ciaocomitop .category .catInner .contentBox .today{
    color: #FF0000;
    border-bottom: 1px solid #FF0000;
}
.ciaocomitop .category .catInner .contentBox .workImg{
    position: relative;
    text-align:center;
}
.ciaocomitop .category .catInner .contentBox .workImg > img{
    width: auto;
    height: 48vw;
    margin: 2vw auto 3.3333333333333335vw;
    text-align: center;
}
@media screen and (min-width:501px){
    .ciaocomitop .category .catInner .contentBox .workImg > img{
        width: auto;
        height: 240px;
        margin: 13px auto 18px;
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
    }  
}
.ciaocomitop .category .catInner .contentBox .workTit{
    font-size: calc(28 / 750 * 100vw);
    font-weight: 700;
    line-height: 1.357;
    margin-bottom: 1.3333333333333333vw;
}
@media screen and (min-width:501px){
    .ciaocomitop .category .catInner .contentBox .workTit{
        font-size: 19px;
        margin-bottom: 10px;
    }
}
.ciaocomitop .category .catInner .contentBox .authorName{
    font-size: calc(22 / 750 * 100vw);
    font-weight: 700;
    line-height: 1.416;
    color: #888;
    margin-bottom: 1.3333333333333333vw;
}
@media screen and (min-width:501px){
    .ciaocomitop .category .catInner .contentBox .authorName{
        font-size: 15px;
        margin-bottom: 10px;
    }  
}
.ciaocomitop .category .catInner .contentBox .label{
    display: inline-flex;
    justify-content: start;
    flex-wrap: wrap;
}
.ciaocomitop .category .catInner .contentBox .label .label-name{
    margin-right: 1.3333333333333333vw;
    margin-bottom: 2.666666vw;
}
@media screen and (min-width:501px){
    .ciaocomitop .category .catInner .contentBox .label .label-name{
        margin-right: 10px;
        margin-bottom: 8px;
    }
}
.ciaocomitop .category .catInner .contentBox .label .label-name > p{
    display: inline-block;
    position: relative;
    padding: 0.6666666666666666vw 2.6666666666666665vw;
    border-radius: 1.3333333333333333vw;
    font-size: calc(24 / 750 * 100vw);
    font-weight: 700;
    line-height: 1.416;
    text-align: center;
    color: #333;
    border: 1px solid #000;
}
@media screen and (min-width:501px){
    .ciaocomitop .category .catInner .contentBox .label .label-name > p{
        padding: 2px 14px;
        border-radius: 6.67px;
        font-size: 16px;
    }
}
.ciaocomitop .category .catInner .contentBox .label .label-name > p::before{
    position: absolute;
    top: 0.6666666666666666vw;
    right: -0.6666666666666666vw;
    width: 100%;
    height: 100%;
    content: "";
    border-radius: 1.3333333333333333vw;
    z-index: -1;
}
@media screen and (min-width:501px){
    .ciaocomitop .category .catInner .contentBox .label .label-name > p::before{
        top: 3px;
        right: -3px;
        border-radius: 6.67px;
    }
}
.ciaocomitop #category01 .catInner .contentBox .label .label-name > p::before{
    background-color: #b4ebeb;
}
.ciaocomitop #category02 .catInner .contentBox .label .label-name > p::before{
    background-color: #c8b4eb;
}
.ciaocomitop #category03 .catInner .contentBox .label .label-name > p::before{
    background-color: #b6d4ff;
}
.ciaocomitop #category04 .catInner .contentBox .label .label-name > p::before{
    background-color: #ffa6c8;
}
.ciaocomitop .category .catInner .contentBox .caption{
    font-size: calc(22 / 750 * 100vw);
    line-height: 1.545;
    margin-bottom: 2vw;
}
@media screen and (min-width:501px){
    .ciaocomitop .category .catInner .contentBox .caption{
        font-size: 15px;
        margin-top: 10px;
        margin-bottom: 5px;
    }
}
.ciaocomitop .category .catInner .contentBox .categoryBtn{
    display: flex;
    flex-wrap: wrap;
}
.ciaocomitop .category .catInner .contentBox .categoryBtn li{
    width: 20vw;
    margin-right: 1.3333333333333333vw;
    margin-top: 1.3333333333333333vw;
}
@media screen and (min-width:501px){
    .ciaocomitop .category .catInner .contentBox .categoryBtn li{
        width: 100px;
        margin-right: 8px;
        margin-top: 8px;
    }
}
.ciaocomitop .category .catInner .contentBox .categoryBtn li:nth-child(2n){
    margin-right: 0;
}
.ciaocomitop .category .catInner .contentBox .categoryBtn li > a.btn-story{
    width: 20vw;
    height: 9.333333333333334vw;
    border-radius: 4.666666666666667vw;
    background-color: #fff;
    display: block;
    margin-top: auto;
    line-height: 9.333333333333334vw;
    font-size: calc(24 / 750 * 100vw );
    font-weight: 700;
    text-align: center;
}
@media screen and (min-width:501px){
    .ciaocomitop .category .catInner .contentBox .categoryBtn li > a.btn-story{
        width: 100px;
        height: 46.66px;
        border-radius: 23.33px;
        background-color: #fff;
        display: block;
        line-height: 46.66px;
        font-size: 16px;
        font-weight: 700;
        text-align: center;
    }  
}