@charset "utf-8";
/**********************************************
    パンくず
**********************************************/
.fs-c-breadcrumb{
    border-top: 0.25px #808080 solid;
    border-bottom: 0.25px #808080 solid;
    margin: 10px 0 30px;
    padding: 12px 0 10px;
    max-width: 100%;
}
.fs-c-breadcrumb__list{
    font-size: 11px;
    max-width: 1320px;
    margin: 0 auto;
}
@media screen and (max-width: 768px){
    .fs-c-breadcrumb__list{
        text-align: center;
    }
}


/**********************************************
    コーディネート一覧
**********************************************/
.fs-c-coordinationTagList::before{
    content: "タグ";
    font-size: 16px;
    font-weight: normal;
    line-height: 1;
    padding: 0 0 10px;
    margin-top: 50px;
    margin-bottom: 25px;
    border-bottom: 0.5px #4D4D4D solid;
    display: block;
    width: 100%;
}
    
/**** サイド ****/
#cd__custom__side .fs-c-staffCoordinationSearch__heading{
    font-size: 16px;
    line-height: 1;
    font-weight: normal;
    padding: 0 0 10px;
    margin-bottom: 25px;
    border-bottom: 0.5px #4D4D4D solid;
    cursor: default;
}
.fs-c-staffCoordinationSearch__heading::after{
    display: none;
}
.fs-c-staffCoordinationSearch__heading+.fs-c-staffCoordinationSearch__body{
    display: block;
}
.fs-c-staffCoordinationSearch+.fs-c-staffCoordinationSearch{
    margin-top: 80px;
}
.fs-c-staffCoordinationSearch--coordinationGender{
    display: none;
}

#cd__custom__side .fs-c-staffCoordinationSearchMenu>li{
    font-size: 16px;
}
.fs-c-coordinationTagList{
    padding: 0;
    background: #FFF;
}
.fs-c-coordinationTagList>li{
    margin: 3px;
}
.fs-c-coordinationTagList>li a.fs-c-coordinationTag{
    background: #666666;
    color: #FFF;
    padding: 5px;
    line-height: 1;
    display: inline-block;
}
#cd__custom__side .fs-c-coordinationTag:link,
#cd__custom__side .fs-c-coordinationTag:visited,
#cd__custom__side .fs-c-coordinationTag:hover,
#cd__custom__side .fs-c-coordinationTagactive{
    color: #FFF;
}
 
/**** 一覧 ****/
.fs-c-coordinationList .fs-c-sortItems__label,
.fs-c-staffList .fs-c-sortItems__label{
    display: none;
}
.fs-c-coordinationList .fs-c-coordinationList__controller,
.fs-c-staffList  .fs-c-staffList__controller{
    border-bottom: 1px #808080 solid;
    margin: 0;
}
.fs-c-coordinationList .fs-c-sortItems,
.fs-c-staffList .fs-c-sortItems{
    margin: 0;
}
.fs-c-coordinationList .fs-c-sortItems__label,
.fs-c-staffList .fs-c-sortItems__label{
    display: none;
}
.fs-c-coordinationList .fs-c-sortItems__list>li,
.fs-c-staffList .fs-c-sortItems__list>li{
    margin-right: 12px;
    border: 1px #808080 solid;
    border-bottom: none;
}
.fs-c-coordinationList .fs-c-sortItems__list__item.is-active,
.fs-c-staffList .fs-c-sortItems__list__item.is-active{
    font-weight: bold;
    background: #808080;
}
.fs-c-coordinationList .fs-c-sortItems__list__item__label,
.fs-c-staffList .fs-c-sortItems__list__item__label{
    font-size: 16px;
    line-height: 1;
    padding: 12px 40px;
}
.fs-c-coordinationList .fs-c-coordinationList__controller>.fs-c-listControl,
.fs-c-staffList .fs-c-staffList__controller>.fs-c-listControl{
    margin: 0;
    font-size: 11px;
    color: #000;
}
.fs-c-coordinationList .fs-c-coordinationList__controller:nth-child(1) .fs-c-pagination,
.fs-c-staffList .fs-c-staffList__controller:nth-child(1) .fs-c-pagination{
    display: none;
}
.fs-c-coordinationList .fs-c-coordinationList__controller:last-child,
.fs-c-staffList .fs-c-staffList__controller:last-child{
    border: none;
}
.fs-c-coordinationList .fs-c-coordinationList__controller:last-child .fs-c-sortItems,
.fs-c-staffList .fs-c-staffList__controller:last-child .fs-c-sortItems{
    display: none;
}

.fs-c-coordinationList__list,
.fs-c-staffList__list{
    display: flex;
    flex-wrap: wrap;
    padding: 20px 0 40px;
    grid-gap: inherit;
}
.fs-c-coordinationList__list__item,
.fs-c-staffListItem{
    padding: 0;
    width: 32%;
    margin: 0 2% 50px 0;
    color: #000;
}
.fs-c-coordinationNewMark{
    color: #000000;
    background: #FCEE21;
    padding: 0 20px;
}
.fs-c-coordinationListItem__publicationDate{
    font-size: 11px;
    float: right;
    margin: 4px 0 0;
}
.fs-c-coordinationListItem__publicationDate::after{
    content: "";
    display: block;
    height: 20px;
}
.fs-c-coordinationListItem__staffInfo{
    margin: 20px 0 0;
    clear: both;
}
.fs-c-coordinationListItem__staffInfo__name{
    font-size: 16px;
    font-weight: normal;
}
.fs-c-coordinationListItem__staffInfo__image{
    width: 98px;
    height: 98px;
}
.fs-c-coordinationListItem__staffInfo__profile{
    padding-left: 10px;
    font-size: 13px;
    font-weight: normal;
    color: #000000;
}
.fs-c-coordinationListItem__staffInfo__name{
    font-size: 13px;
    font-weight: normal;
}
.fs-c-coordinationListItem__staffInfo__height{
    display: block;
}
@media screen and (max-width: 1280px){
    body .fs-l-main{
        max-width: 100%;
    }
}
@media screen and (min-width: 769px){
    /**** レイアウト ****/
    #fs_Staff .fs-l-main,
    #fs_Coordination .fs-l-main{
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
    }
    #fs_Staff .fs-l-main #cd__custom__side,
    #fs_Coordination .fs-l-main #cd__custom__side{
        width: 270px;
    }
    #fs_Staff .fs-l-main .fs-c-staffList,
    #fs_Coordination .fs-l-main .fs-c-coordinationList{
        width: calc( 100% - 320px );
        margin: 0;
    }
    /**** サイド ****/
    #cd__custom__side .fs-c-staffCoordinationSearchControl__label{
        display: none;
    }
    #cd__custom__side .fs-c-staffCoordinationSearchControl__list{
        display: block;
    }

    /**** 一覧 ****/
    .fs-c-coordinationList__list__item:nth-child(3n),
    .fs-c-staffListItem:nth-child(3n){
        margin-right: 0;
    }
    a.fs-c-coordinationListItem__link{
        transition: all 0.6s ease;
    }
    a.fs-c-coordinationListItem__link:hover{
        opacity: 0.7;
    }
}

@media screen and (max-width: 768px){
    
    /**** サイド ****/
    .fs-c-staffCoordinationSearchControl__label{
        width: 200px;
        margin: 0 auto;
        font-size: 11px;
        padding: 10px 0;
    }
    .fs-c-staffCoordinationSearchControl__list{
        margin-top: 20px;
        padding: 0 5%;
    }
    #cd__custom__side .fs-c-staffCoordinationSearch__heading{
        margin-bottom: 10px;
    }
    .fs-c-staffCoordinationSearch+.fs-c-staffCoordinationSearch{
        margin-top: 30px;
    }
    #cd__custom__side .fs-c-staffCoordinationSearchMenu>li{
        font-size: 13px;
    }
    .fs-c-coordinationTagList::before{
        margin-top: 30px;
    }
    
    .fs-c-staffCoordinationSearchControl__checkbox:checked+.fs-c-staffCoordinationSearchControl__label::after{
        right: 22px;
    }

/* スタッフスタートコーディネート詳細 */

.fs-c-coordinationCatalog__footer{
    text-align: center;
  }

    /**** 一覧 ****/
    .fs-c-coordinationList,
    .fs-c-staffList{
        margin: 20px 0 160px;
    }
    .fs-c-coordinationList .fs-c-sortItems,
    .fs-c-staffList .fs-c-sortItems{
        width: 100%;
    }
    .fs-c-coordinationList .fs-c-sortItems .fs-c-sortItems__list,
    .fs-c-staffList .fs-c-sortItems .fs-c-sortItems__list{
        justify-content: space-between;
        width: 100%;
    }
    .fs-c-coordinationList .fs-c-sortItems__list>li,
    .fs-c-staffList .fs-c-sortItems__list>li{
        margin: 0;
        width: 32%;
    }
    .fs-c-coordinationList .fs-c-sortItems__list__item__label,
    .fs-c-staffList .fs-c-sortItems__list__item__label{
        font-size: 12px;
        padding: 10px 0;
        text-align: center;
    }
    .fs-c-coordinationList .fs-c-coordinationList__controller:nth-child(1) .fs-c-listControl,
    .fs-c-staffList .fs-c-staffList__controller:nth-child(1) .fs-c-listControl{
        display: none;
    }
    .fs-c-coordinationList__list__item,
    .fs-c-staffList__list__item{
        width: 48.5%;
        margin: 0 3% 30px 0;
        color: #000;
    }
    .fs-c-coordinationList__list__item:nth-child(2n),
    .fs-c-staffList__list__item:nth-child(2n){
        margin-right: 0;
    }

    .fs-c-coordinationNewMark{
        padding: 0 15px;
    }
    .fs-c-coordinationListItem__publicationDate{
        font-size: 10px;
    }
    .fs-c-coordinationListItem__publicationDate::after{
        height: 10px;
    }
    .fs-c-coordinationListItem__staffInfo{
        margin: 10px 0 0;
    }
    .fs-c-coordinationListItem__staffInfo__image{
        width: 60px;
        height: 60px;
    }
    .fs-c-coordinationListItem__staffInfo__profile{
        padding-left: 0px;
        font-size: 10px;
        font-weight: normal;
        color: #000000;
    }
    .fs-c-coordinationListItem__staffInfo__name{
        font-size: 10px;
        font-weight: normal;
    }
    .fs-c-listControl{
        align-items: center;
        justify-content: center;
        width: 100%;
    }
    
}

/**********************************************
    コーディネート詳細
**********************************************/

/**** 詳細 ****/
#cd__custom__ditail{
    color: #000;
}
.fs-c-coordinationStaffInfo{
    border-top: none;
    border-bottom: 0.25px #808080 solid;
}
.fs-c-coordinationStaffInfo__image{
    width: 140px;
}
.fs-c-coordinationStaffInfo__profile{
    font-size: 16px;  
}
.fs-c-coordinationStaffInfo__name{
    font-size: 16px;
    font-weight: normal; 
}
.fs-c-coordinationPublicationDate{
    padding: 30px 10px 20px 20px;
    font-size: 15px;
}
.fs-c-coordinationComment{
    padding: 20px 10px 50px 20px;
    font-size: 15px;
    line-height: 2;
}
#cd__custom__ditail .fs-c-coordinationTagList{
    border-top: 0.25px #808080 solid;
    border-bottom: 0.25px #808080 solid;
    padding: 22px 0;
}
#cd__custom__ditail .fs-c-coordinationTagList::before{
    display: none;
}

/**** 着用アイテム ****/
.fs-c-coordinationProduct{
    padding-top: 100px;
    width: 100%;
}
.fs-c-coordinationProduct .fs-c-coordinationProduct__title{
    font-size: 29px;
    color:#808080;
    font-weight: bold;
    text-align: center;
    margin-bottom: 30px;
    border: none;
}
.fs-c-coordinationProduct__list {
    grid-template-columns: calc(25% - 10.66667px) calc(25% - 10.66667px) calc(25% - 10.66667px) calc(25% - 10.66667px);
}

/**** その他のコーディネート ****/
.fs-c-coordinationCatalog,
.fs-c-coordinationCatalog:not(:first-child){
    padding-top: 120px;
    margin: 0;
    width: 100%;
}
.fs-c-coordinationCatalog .fs-c-coordinationCatalog__title{
    font-size: 29px;
    color:#808080;
    font-weight: bold;
    text-align: center;
    margin-bottom: 30px;
    border: none;
}
.fs-c-coordinationCatalog__list{
    grid-template-columns: calc(25% - 10.66667px) calc(25% - 10.66667px) calc(25% - 10.66667px) calc(25% - 10.66667px);
}
.fs-c-coordinationCatalog__list article:nth-child(n+5),
.fs-c-coordinationCatalog__list .fs-c-coordinationNewMark,
.fs-c-coordinationCatalog__list .fs-c-coordinationListItem__publicationDate{
    display: none;
}
.fs-c-coordinationCatalog__footer{
    margin-top: 60px;
    font-size: 19px;
    color: #666666;
}

@media screen and (min-width: 769px){
    /**** レイアウト ****/
    #fs_CoordinationDetails .fs-l-main .fs-l-coordinationLayout{
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
    }
    .fs-c-coordinationCarouselMainImage{
        width: 675px;
        display: flex;
        justify-content: space-between;
        flex-direction: row-reverse;
    }
    #cd__custom__ditail{
        width: calc( 100% - 705px);
    }
    /**** メイン画像 ****/
    .fs-c-coordinationCarouselMainImage__carousel{
        width: 580px;
    }
    .fs-c-coordinationCarouselMainImage__thumbnailList{
        display: block;
        margin: 0;
        overflow-x: hidden;
        overflow-y: auto;
    }
    .fs-c-coordinationCarouselMainImage__thumbnailList > li{
        margin: 0 0 10px;
    }
}
@media screen and (max-width: 768px){
    /**** メイン画像 ****/
    .fs-c-coordinationCarouselMainImage .fs-c-slick .slick-prev,
    .fs-c-coordinationCarouselMainImage .fs-c-slick .slick-next{
        background: rgba(0, 0, 0, 0);
    }
    .fs-c-coordinationCarouselMainImage__thumbnailList{
        display: none!important;
    }

    /**** 詳細 ****/
    .fs-c-coordinationStaffInfo__image{
        width: 105px;
    }
    .fs-c-coordinationStaffInfo__profile{
        font-size: 13px;
        padding-left: 5%;
    }
    .fs-c-coordinationStaffInfo__name{
        font-size: 13px;
    }
    .fs-c-coordinationPublicationDate{
        font-size: 13px;
        padding: 30px 10px 10px 40px;
    }
    .fs-c-coordinationComment{
        font-size: 13px;
        padding: 10px 10px 30px 40px;
    }
    #cd__custom__ditail .fs-c-coordinationTagList{
        padding: 20px 40px;
    }
    #cd__custom__ditail .fs-c-coordinationTagList>li{
        font-size: 11px;
    }

    /**** 着用アイテム ****/
    .fs-c-coordinationProduct{
        padding-top: 60px;
        width: 100%;
    }
    .fs-c-coordinationProduct .fs-c-coordinationProduct__title{
        font-size: 15px;
        margin-bottom: 20px;
    }
    .fs-c-coordinationProduct__list {
        grid-template-columns: none;
        grid-gap: inherit;
        display: flex;
        flex-wrap: wrap;
    }
    .fs-c-coordinationProduct__list article{
        width: 48%;
        margin: 0 1% 5%;
    }
    .fs-c-productListItem__productName{
        font-size: 11px;
    }
    .fs-c-productListItem__prices{
        font-size: 11px;
    }
    .fs-c-productPrice__addon{
        font-size: 11px;
    }
    
    /**** その他のコーディネート ****/
    .fs-c-coordinationCatalog,
    .fs-c-coordinationCatalog:not(:first-child){
        padding-top: 60px;
        width: 100%;
    }
    .fs-c-coordinationCatalog .fs-c-coordinationCatalog__title{
        font-size: 15px;
        margin-bottom: 20px
    }
    .fs-c-coordinationCatalog__list{
        grid-template-columns: none;
        grid-gap: inherit;
        display: flex;
        flex-wrap: wrap;
    }
    .fs-c-coordinationCatalog__list article{
        width: 48%;
        margin: 0 1% 5%;
    }
    .fs-c-coordinationCatalog__footer{
        margin-top: 30px;
        font-size: 13px;
    }
}


/**********************************************
    スタッフ一覧
**********************************************/
.fs-c-staffListItem__profile,
.fs-c-staffListItem__profile__name{
    font-size: 18px;
    font-weight: normal;
    color: #000;
    margin: 0;
}
.fs-c-staffListItem__profile__height{
    display: block;
}
.fs-c-staffCoordinationSearch--staffGender{
    display: none;
}
@media screen and (min-width: 769px){
    .fs-c-coordinationList__list__item, .fs-c-staffListItem{
        padding:30px 0 0 ;
    }
}
@media screen and (max-width: 768px){
    .fs-c-staffListItem__profile,
    .fs-c-staffListItem__profile__name{
        font-size: 12px;
    }
    .fs-c-staffList__list__item{
        margin-bottom: 40px;
    }
}

/**********************************************
    スタッフ詳細
**********************************************/
#fs_StaffDetails .fs-c-staffDetail{
    display: flex;
    align-items: stretch;
    padding: 0;
    margin-bottom: 20px;
    background: none;
}
#fs_StaffDetails .fs-c-staffDetail__image{
    width: 200px;
}
#fs_StaffDetails .fs-c-staffDetail__data{
    flex-direction: column;
    justify-content: center;
    color: #000;
    font-size: 16px;
    width: 350px;
}
#fs_StaffDetails .fs-c-staffDetail__name{
    font-size: 16px;
    font-weight: normal;
    margin: 0;
}
#fs_StaffDetails .fs-c-staffInstagram::before{
    font-size: 20px;
}
#fs_StaffDetails .fs-c-staffDetail__profile{
    border-left: 0.25px #808080 solid;
    display: flex;
    align-items: center;
    width: calc( 100% - 630px);
    padding: 5px 30px 5px 70px;
    font-size: 16px;
    color: #000;
}
#fs_StaffDetails .fs-c-coordinationCatalog.fs-c-coordinationCatalog--staff.is-sortedByNewestFirst{
    border-top: 0.25px #808080 solid;
    padding-top: 20px;
}
#fs_StaffDetails .fs-c-coordinationCatalog.fs-c-coordinationCatalog--staff.is-sortedByNewestFirst .fs-c-coordinationCatalog__header{
    display: none;
}
#fs_StaffDetails .fs-c-coordinationCatalog__list{
    grid-gap: 8px;
    grid-template-columns: calc(25% - 6px) calc(25% - 6px) calc(25% - 6px) calc(25% - 6px);
}
#fs_StaffDetails .fs-c-coordinationCatalog--staff .fs-c-coordinationCatalog__list article:nth-child(n+5){
    display: block;
}
@media screen and (max-width: 768px){
    #fs_StaffDetails .fs-c-staffDetail{
        flex-wrap: wrap;
    }
    #fs_StaffDetails .fs-c-staffDetail__image{
        width: 100px;
        padding-bottom: 10px;
    }
    #fs_StaffDetails .fs-c-staffDetail__data{
        width: calc( 100% - 120px );
        font-size: 13px;
        padding-bottom: 10px;
    }
    #fs_StaffDetails .fs-c-staffDetail__name{
        font-size: 13px;
    }
    #fs_StaffDetails .fs-c-staffInstagram::before{
        font-size: 15px;
    }
    #fs_StaffDetails .fs-c-staffDetail__profile{
        border-left: none;
        border-top: 0.25px #808080 solid;
        width: 100%;
        font-size: 13px;
        padding: 30px 20px 15px;
    }
    #fs_StaffDetails .fs-c-coordinationCatalog.fs-c-coordinationCatalog--staff.is-sortedByNewestFirst{
        padding-top: 10px;
    }
    #fs_StaffDetails .fs-c-coordinationCatalog__list{
        grid-gap: inherit;
        display: flex;
        justify-content: space-between;
    }
    #fs_StaffDetails .fs-c-coordinationCatalog__list article{
        width: 49%;
        margin: 0 0 8px;
    }
}