@charset "UTF-8";

/* ---------------------------------------------
	サクヒン一覧ページ
--------------------------------------------- */
/*.worksList #visualCompWrap img{
    width: 100%;
    height: auto;
}*/
.worksList #contentAllWrap #worksListWrap,
.creatorDetail #contentAllWrap #worksListWrap{
    padding: 0 0 60px;
}
.worksList #contentAllWrap #worksListWrap{
    padding-top: 3em;
    border-top: dotted 0.34em #8d8d8d;
}
#worksListWrap > ul{
    display: flex;
    flex-wrap: wrap;
}
#worksListWrap > ul li{
    width: 225px;
    margin: 0 20px 20px 0;
    /* float: left; */
    /*overflow: hidden;*/
}
#worksListWrap > ul li:nth-of-type(4n){ margin: 0 0 20px 0;}
#worksListWrap .photoBase{
    width: 225px;
    height: 225px;
    overflow: hidden;
    background-color: #666;
    box-shadow: 1px -1px 10px rgba(0,0,0,0.2);
    margin-bottom: 0.4em;
    position: relative;
}
#worksListWrap .photoBase.loading{
    background-image: url("../../img/loading.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 20%;
}
#worksListWrap .photoBase img{
    width: 100%;
    height: auto;
    backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
    position: relative;
    margin: 0;
    top: 0;
}
#worksListWrap li p{
    line-height: 1.2;
    font-weight: bold;
}
#worksListWrap li p span{
    font-size:80%;
    letter-spacing: -0.03em;
}

.cx_smartphoneview #worksListWrap > ul li{
    width: 32%;
    margin: 0 2% 20px 0;
}
.cx_smartphoneview #worksListWrap > ul li:nth-of-type(3n){ margin: 0 0 20px 0;}
.cx_smartphoneview #worksListWrap .photoBase{ width: 100%; height: 200px;}



/*-------------Instagram-------------*/
#instagramListWrap{
    background-color: rgba(0,0,0,0.16);
    padding: 1.4em 1em 1em;
    margin: 0.5em 0 3em;
}
.cx_smartphoneview #instagramListWrap{ padding: 1.4em 0.4em 1em;}
#instagramListWrap h3{
    font-size: 180%;
    line-height: 1.2;
    font-feature-settings: "palt";
    margin-bottom: 0.3em;
    display: flex;
    justify-content: center;
    align-items: center;
}
/* #instagramListWrap h3::before{
    content: "";
    display: block;
    width: 1em;
    height: 1em;
    background: url("../../instagram/img/logo_instagram.png") no-repeat center center;
    background-size: contain;
    margin-right: 0.3em;
} */
.cx_smartphoneview #instagramListWrap h3{ font-size: 150%;}
.instagram__intro{
    text-align: center;
    font-feature-settings: "palt";
}
.instagram__intro p{
    font-weight: bold;
    line-height: 1.4;
}
a.instagram__intro__link{
    width: 15em;
    margin: 0 auto 0.6em;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    /* background-color: #e2007e; */
    color: #e2007e;
    font-size: 120%;
    font-weight: bold;
    line-height: 1.0;
    padding: 0.3em 3em;
    position: relative;
    /* border-radius: 4em; */
    cursor: pointer;
    border-bottom: solid 0.2em rgba(255,255,255,0.0);
}
.cx_smartphoneview a.instagram__intro__link{ width: 100%; box-sizing: border-box;}
a.instagram__intro__link > *{ flex-shrink: 0;}
a.instagram__intro__link::before{
    content: "";
    display: block;
    width: 1.4em;
    height: 1.4em;
    background: url("../../instagram/img/logo_instagram.png") no-repeat center center;
    background-size: contain;
    margin-right: 0.3em;
    transition: all 200ms;
}
a.instagram__intro__link::after{
    content: "";
    display: block;
    /* position: absolute;
    top: 50%;
    right: 0.4em; */
    width: 1.4em;
    height: 1.4em;
    background-color: #e2007e;
    /* margin: -0.9em 0 0; */
    margin-left: 0.3em;
    border-radius: 50%;
    background-image: url("../../img/arrow.svg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 50%;
    transition: all 200ms;
}
.cx_displaydevice a.instagram__intro__link:hover{ border-bottom: solid 0.2em #fff;}
.cx_displaydevice a.instagram__intro__link:hover::before{
    transform: translateX(-0.2em);
}
.cx_displaydevice a.instagram__intro__link:hover::after{
    transform: translateX(0.2em);
}


.instagram__list{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.instagram__list li{
    flex-shrink: 0;
    width: 24%;
    background-color: #fff;
    margin-bottom: 0.4em;
    display: none;
}
.instagram__list li.empty{ background-color: rgba(0,0,0,0.16);}
.cx_smartphoneview .instagram__list li{
    width: 49%;
}
.instagram__list__thum img{ width: 100%; height: auto;}
.instagram__list__info{ padding: 0.5em 0.8em;}
.cx_smartphoneview .instagram__list__info{ padding: 0.5em 0.6em;}
.instagram__list__info__ttl{
    font-size: 94%;
    font-weight: bold;
    line-height: 1.4;
    padding-bottom: 0.3em;
    font-feature-settings: "palt";
}
.instagram__list__info__link{ padding-bottom: 0.3em;}
.instagram__list__info__link:nth-last-of-type(1){ padding-bottom: 0;}
.instagram__list__info__link a{
    font-size: 94%;
    line-height: 1.4;
    display: flex;
    font-feature-settings: "palt";
}
.instagram__list__info__link a::before{
    content: "";
    display: block;
    flex-shrink: 0;
    width: 1.2em;
    height: 1.2em;
    background-color: #e2007e;
    border-radius: 50%;
    background-image: url("../../img/arrow.svg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 50%;
    margin-right: 0.2em;
}
.cx_displaydevice .instagram__list__info__link a:hover{
    text-decoration: underline;
}

.linkMore a{
    width: 600px;
    margin: 0 auto;
    display: block;
    text-align: center;
    background-color: #e2007e;
    color: #fff;
    font-size: 120%;
    line-height: 1.0;
    padding: 0.9em 0;
    position: relative;
    border-radius: 4em;
    cursor: pointer;
}
.linkMore a::after{
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    right: 0.4em;
    width: 2.2em;
    height: 2.2em;
    background-color: rgba(255,255,255,0.3);
    margin: -1.1em 0 0;
    border-radius: 50%;
    background-image: url("../../img/arrow.svg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 50%;
    transform: rotate(90deg);
    transition: all 500ms;
}
.linkMore a.opened::after{
    transform: rotate(270deg);
}
.cx_displaydevice .linkMore a:hover{ background-color: #fc008c;}

.cx_smartphoneview .linkMore a{
    width: 84%;
    font-size: 100%;
    padding: 0.8em 0;
}

/* ---------------------------------------------
	サクヒン詳細ページ
--------------------------------------------- */
.worksDetail #visualCompWrap{
    position: relative;
    text-align: center;
    /*background-color: rgba(0,0,0,0.15);*/
}
.worksDetail #visualCompWrap > div{
    margin: 0 auto;
    overflow: hidden;
    box-shadow: 1px 1px 10px 1px rgba(0,0,0,0.3);
    height: auto;
}
.worksDetail #visualCompWrap #worksPhotoWrap{
    transition: margin-left 500ms ease-in;
    background-color: rgba(0,0,0,0.5);
    height: auto;
}
.worksDetail #visualCompWrap #worksPhotoWrap li{
    float: left;
}
.worksDetail #visualCompWrap #worksPhotoWrap img{
    width: 100%;
    height: auto;
    vertical-align: bottom;
}
.worksDetail #visualCompWrap #worksPhotoWrap li p{
    text-align: right;
    color: #fff;
    font-size: 88%;
    line-height: 1.2;
    padding: 4px 0.4em;
    box-sizing: border-box;
}
@media screen and (min-width:1200px) {
    .worksDetail #visualCompWrap{
        width: 1200px;
        margin: 0 auto;
    }
    /*.worksDetail #visualCompWrap #worksPhotoWrap{ height: 680px;}*/
    .worksDetail #visualCompWrap > div,
    .worksDetail #visualCompWrap #worksPhotoWrap img{ width: 1200px;}
}
.worksDetail #visualCompWrap #visualControl li{
    position: absolute;
    top: 50%;
    margin-top: -35px;
}
.worksDetail #visualCompWrap #visualControl li:nth-of-type(1){ left: 10px;}
.worksDetail #visualCompWrap #visualControl li:nth-of-type(2){ right: 10px;}
.worksDetail #visualCompWrap #visualControl li a{
    display: block;
    width: 70px;
    height: 70px;
    /*background-color: rgba(255,255,255,0.7);*/
    background-color: #c6036f;
}

.worksDetail .news #visualCompWrap #visualControl li a{ background-color: #f28f00;}
.worksDetail .drama #visualCompWrap #visualControl li a{ background-color: #00b5ee;}
.worksDetail .variety #visualCompWrap #visualControl li a{ background-color: #60b630;}
.worksDetail .sports #visualCompWrap #visualControl li a{ background-color: #655aa5;}

.worksDetail #visualCompWrap #visualControl li a::after{
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    margin-top: -18px;
    width: 0px;
	height: 0px;
	border-style: solid;
}
.worksDetail #visualCompWrap #visualControl li:nth-of-type(1) a::after{
    left: 23px;
	border-width: 18px 18px 18px 0;
	border-color: transparent #fff transparent transparent;
}
.worksDetail #visualCompWrap #visualControl li:nth-of-type(2) a::after{
    right: 23px;
	border-width: 18px 0 18px 18px;
	border-color: transparent transparent transparent #fff;
}
@media screen and (min-width:1400px) {
    .worksDetail #visualCompWrap #visualControl li:nth-of-type(1){ left: -80px;}
    .worksDetail #visualCompWrap #visualControl li:nth-of-type(2){ right: -80px;}
}
@media screen and (max-width:640px) {
    .worksDetail #visualCompWrap #visualControl li{
        top: auto;
        bottom: 10px;
        margin-top: 0;
    }
    .worksDetail #visualCompWrap #visualControl li:nth-of-type(1){ left: 10px;}
    .worksDetail #visualCompWrap #visualControl li:nth-of-type(2){ right: 10px;}
    .worksDetail #visualCompWrap #visualControl li a{ width: 60px; height: 60px;}
    .worksDetail #visualCompWrap #visualControl li:nth-of-type(1) a::after{ left: 18px;}
    .worksDetail #visualCompWrap #visualControl li:nth-of-type(2) a::after{ right: 18px;}
}

.worksDetail #visualCompWrap #locator{
    margin: 15px auto;
    display: inline-block;
}
.worksDetail #visualCompWrap #locator li{
    float: left;
    width: 14px;
    height: 14px;
    background-color: #aaa;
    margin: 0 5px;
    border-radius: 50%;
}
.worksDetail .news #visualCompWrap #locator li.here{ background-color: #f28f00;}
.worksDetail .drama #visualCompWrap #locator li.here{ background-color: #00b5ee;}
.worksDetail .variety #visualCompWrap #locator li.here{ background-color: #60b630;}
.worksDetail .sports #visualCompWrap #locator li.here{ background-color: #655aa5;}
@media screen and (max-width:640px) {
    .worksDetail #visualCompWrap #locator{ margin: 26px auto;}
    .worksDetail #visualCompWrap #locator li{
        width: 20px;
        height: 20px;
    }
}

/*-------------作品データ-------------*/
#workDataWrap{
    padding: 0 0 60px;
}

#workDataWrap #oaDataWrap{
    padding: 25px 0 25px;
    margin-bottom: 30px;
}

.worksDetail .news #oaDataWrap{
    border-top: solid 3px #f28f00;
    border-bottom: dotted 3px #f28f00;
}
.worksDetail .drama #oaDataWrap{
    border-top: solid 3px #00b5ee;
    border-bottom: dotted 3px #00b5ee;
}
.worksDetail .variety #oaDataWrap{
    border-top: solid 3px #60b630;
    border-bottom: dotted 3px #60b630;
}
.worksDetail .sports #oaDataWrap{
    border-top: solid 3px #655aa5;
    border-bottom: dotted 3px #655aa5;
}


#workDataWrap h3{
    font-size: 220%;
    line-height: 1.2;
    float: left;
}
#workDataWrap #oaDate{
    float: right;
    line-height: 2.0;
    padding: 8px 0 0;
    text-align: right;
}

.cx_smartphoneview #workDataWrap #oaDataWrap{ padding: 0.6em 0;}
.cx_smartphoneview #workDataWrap h3,
.cx_smartphoneview #workDataWrap #oaDate{
    font-size: 160%;
    float: none;
}
.cx_smartphoneview #workDataWrap #oaDate{
    line-height: 1.4;
    font-size: 100%;
    padding: 0;
    text-align: left;
}

/*-------------制作者エリア-------------*/
#workDataWrap .persDataWrap{ margin-bottom: 10px;}
#workDataWrap .persDataWrap .jobIcn{
    width: 80px;
    height: 80px;
    background: url("../img/bijutuchan_icn.png") 0 0;
    background-color: #c9c9c9;
    float: left;
    margin: 0 10px 0 0;
    border-radius: 50%;
}
#workDataWrap .persDataWrap .jobIcn.designer{ background-position: 0 0;}
#workDataWrap .persDataWrap .jobIcn.ap{ background-position: 0 -80px;}
#workDataWrap .persDataWrap .jobIcn.shinkoh{ background-position: 0 -160px;}
#workDataWrap .persDataWrap .jobIcn.dougu_l{ background-position: 0 -240px;}
#workDataWrap .persDataWrap .jobIcn.acryl{ background-position: 0 -320px;}
#workDataWrap .persDataWrap .jobIcn.clothes{ background-position: 0 -400px;}
#workDataWrap .persDataWrap .jobIcn.light{ background-position: 0 -480px;}
#workDataWrap .persDataWrap .jobIcn.make{ background-position: 0 -560px;}
#workDataWrap .persDataWrap .jobIcn.dougu_s{ background-position: 0 -640px;}
#workDataWrap .persDataWrap .jobIcn.deco{ background-position: 0 -720px;}
#workDataWrap .persDataWrap .jobIcn.flower{ background-position: 0 -800px;}
#workDataWrap .persDataWrap .jobIcn.steel{ background-position: 0 -880px;}
#workDataWrap .persDataWrap .jobIcn.plant{ background-position: 0 -960px;}

#workDataWrap .persDataWrap .designerIcn{
    width: 80px;
    height: 80px;
    background-color: #c9c9c9;
    float: left;
    margin: 0 10px 0 0;
    border-radius: 50%;
    overflow: hidden;
}
#workDataWrap .persDataWrap .designerIcn img{ width: 100%; height: auto;}
.cx_smartphoneview #workDataWrap .persDataWrap .designerIcn{ margin-top: 0.4em;}

#workDataWrap .persDataWrap a.persLink{
    position: relative;
    display: block;
    float: left;
    width: 870px;
    height: auto;
    vertical-align: bottom;
    border-bottom: solid 2px #8d8d8d;
    background-color: #e3e3e3;
    box-sizing: border-box;
    padding: 10px;
}
.cx_smartphoneview #workDataWrap .persDataWrap a.persLink{ width: 85%;}

#workDataWrap .persDataWrap a.persLink::before{
    content: "";
    display: block;
    width: 100%;
    height: 50%;
    background-color: rgba(255,255,255,0.5);
    position: absolute;
    top: 0;
    left: 0;
}
#workDataWrap .persDataWrap a.persLink::after{
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    right: 23px;
    margin-top: -14px;
    width: 0px;
	height: 0px;
	border-style: solid;
	border-width: 14px 0 14px 18px;
	border-color: transparent transparent transparent #fff;
    z-index: 9999;
}
/*.news #staffWrap li dt{ background-color: #f28f00;}
.drama #staffWrap li dt{ background-color: #00b5ee;}
.variety #staffWrap li dt{ background-color: #60b630;}
.sports #staffWrap li dt{ background-color: #655aa5;}*/
#workDataWrap .persDataWrap a.persLink.noLink::after{ display: none;}
#workDataWrap .persDataWrap .profile{
    border-right: solid 50px rgba(0,0,0,0.4);
    line-height: 1.7;
    vertical-align: bottom;
    position: relative;
    z-index: 8888;
}
#workDataWrap .persDataWrap .noLink .profile{ border: none;}
#workDataWrap .persDataWrap a.persLink:hover{
    border-bottom: solid 2px #555;
    background-color: #d8d8d8;
}
#workDataWrap .persDataWrap a.persLink.noLink:hover{
    border-bottom: solid 2px #8d8d8d;
    background-color: #e3e3e3;
    color: #000;
}
/*#workDataWrap .persDataWrap a.persLink:hover .profile{
    border-right: solid 50px #333;
}*/

#workDataWrap .persDataWrap .persImg{
    width: 200px;
    height: 200px;
    background-color: #aaa;
    float: left;
    margin: 0 20px 0 0;
}
#workDataWrap .persDataWrap .profile .name{
    font-size: 120%;
    font-weight: bold;
    float: left;
    margin: 0 20px 0 0;
}
#workDataWrap .persDataWrap .profile .department,
#workDataWrap .persDataWrap .profile .year{
    float: left;
    margin: 0 20px 0 0;
    padding-top: 5px;
}

.cx_smartphoneview #workDataWrap .persDataWrap .profile{ line-height: 1.4;}
/*.cx_smartphoneview #workDataWrap .persDataWrap .profile .name{ float: none;}*/
.cx_smartphoneview #workDataWrap .persDataWrap .profile .department,
.cx_smartphoneview #workDataWrap .persDataWrap .profile .year{
    padding-top: 0px;
    margin: 0;
}

#workDataWrap .persDataWrap .profile .name #abeki{ height: 20px; width: 94px;}
.cx_smartphoneview #workDataWrap .persDataWrap .profile .name #abeki{ height: 30px; width: auto;}

/*--------スタッフロール--------*/
#series_tab{
    border-bottom: solid 3px #00b5ee;
}
#series_tab li{
    float: left;
    width: 19.6%;
    margin: 0 0.5% 0 0;
    background-color: #00b5ee;
    color: #fff;
    text-align: center;
    line-height: 1.2;
    padding: 0.8em 0;
    opacity: 0.6;
    cursor: pointer;
    position: relative;
}
.cx_smartphoneview #series_tab li{
    /*padding: 0.4em 0;*/
    font-size: 88%;
    letter-spacing: -0.05em;
}
#series_tab li:nth-of-type(5){ margin-right: 0;}
#series_tab li::after{
    content: "";
    display: block;
    width: 100%;
    height: 50%;
    position: absolute;
    top: 0;
    left: 0;
    background-color: rgba(255,255,255,0.2);
}
#series_tab li.on,
#series_tab li:hover{
    opacity: 1;
    padding: 0.9em 0;
    margin-top: -0.2em;
}
/*.cx_smartphoneview #series_tab li.on,
.cx_smartphoneview #series_tab li:hover{ padding: 0.5em 0;}*/
#staffWrap_l > div{
    padding: 0.7em 0 0;
    display: none;
}
#staffWrap_l > div.on{
    display: block;
}

#workDataWrap > ul#staffWrap{ margin-bottom: 40px;}
#staffWrap li{
    float: left;
    margin: 10px 2em 0 0;
    line-height: 1.4;
}
.cx_smartphoneview #staffWrap li{
    font-size: 90%;
    margin-right: 1em;
}
#staffWrap li dt{
    background-color: #555;
    color: #fff;
    font-size: 90%;
    padding: 0.1em 0.6em 0;
    float: left;
    margin: 0 12px 0 0;
    position: relative;
    border-radius: 20px;
}
/*.news #staffWrap li dt{ background-color: #f28f00;}
.drama #staffWrap li dt{ background-color: #00b5ee;}
.variety #staffWrap li dt{ background-color: #60b630;}
.sports #staffWrap li dt{ background-color: #655aa5;}*/
#staffWrap li dt::after{
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    right: -6px;
    margin-top: -6px;
    width: 0px;
	height: 0px;
	border-style: solid;
	border-width: 6px 0 6px 9px;
	border-color: transparent transparent transparent #555;
}
#staffWrap li dd{ float: left;}
.cx_smartphoneview #staffWrap li dt{ padding: 0.05em 0.6em;}
.cx_smartphoneview #staffWrap li dt::after{
    right: -8px;
    margin-top: -8px;
    border-width: 8px 0 8px 12px;
}

/*-------------レイアウト図-------------*/
/*#workDataWrap #layoutWrap{
    margin-top: 40px;
    position: relative;
}
.cx_smartphoneview #workDataWrap #layoutWrap{ zoom:0.633;}
#workDataWrap #layoutWrap li{
    position: absolute;
    box-sizing: border-box;
}
#workDataWrap #layoutWrap li a{
    display: block;
    width: 100%;
    height: 100%;
    padding: 10px 0 0 10px;
    box-sizing: border-box;
    font-weight: bold;
    font-size: 120%;
    line-height: 1.0;
    text-shadow: 2px 2px 1px #fff, -2px 2px 1px #fff, 2px -2px 1px #fff, -2px -2px 1px #fff;
    background-color: rgba(0,0,0,0.0);
    transition: background-color 50ms ease-in;
}
#workDataWrap #layoutWrap li a:hover{
    background-color: rgba(0,0,0,0.5);
    text-shadow: none;
    color: #fff;
    transition: background-color 300ms ease-out;
}
#workDataWrap #layoutWrap li a::before{
    content: "";
    display: block;
    margin: 3px 3px 0 0;
    float: left;
    width: 0px;
	height: 0px;
	border-style: solid;
	border-width: 14px 8px 0 8px;
	border-color: #e4007f transparent transparent transparent;
}*/


/*-------------リード-------------*/
.leadWrap > p{
    line-height: 1.8;
    text-align: justify;
}
.leadWrap .photoBase.s1-1 p,
.leadWrap .photoBase.s2-1 p{
    font-size: 88%;
    color: #fff;
    padding: 0.2em 0.4em;;
    line-height: 1.4;
}

/*-------------ビジュツのヒミツ-------------*/
.workSecretWrap{
    margin-top: 5px; margin-bottom: 3em;
    position: relative;
}
.workSecretWrap .update{
    text-align: right;
    line-height: 1.2;
    padding: 0;
    font-size: 88%;
    /*position: absolute;
    bottom: 1em;
    right: 0;*/
}
.workSecretWrap .update p{ padding: 0 0.2em;}
/*.cx_smartphoneview .workSecretWrap .update{
    position: relative;
    margin: 1em 0 0;
}*/
.cx_smartphoneview .workSecretWrap .update p{ padding: 0 0.6em;}
#workDataWrap .workSecretWrap .secretHdr{
    width: 100%;
    font-size: 130%;
    /*background-color: #c6036f;*/
    color: #fff;
    line-height: 1.0;
    /*height: 48px;*/
    padding: 8px 0px 8px 5px;
    /*display: inline-block;*/
    vertical-align: baseline;
    position: relative;
    box-sizing: border-box;
    /*cursor: pointer;*/
}

.worksDetail .news .workSecretWrap .secretHdr{
    background-color: #f28f00;
    border-bottom: solid 2px #935700;
}
.worksDetail .drama .workSecretWrap .secretHdr{
    background-color: #00b5ee;
    border-bottom: solid 2px #006a8b;
}
.worksDetail .variety .workSecretWrap .secretHdr{
    background-color: #60b630;
    border-bottom: solid 2px #386d19;
}
.worksDetail .sports .workSecretWrap .secretHdr{
    background-color: #655aa5;
    border-bottom: solid 2px #332d55;
}

.workSecretWrap h4{
    background: url("../img/bijutsuSecretTtl.png") no-repeat 0 0;
    margin: 0 20px 0 6px;
    float: left;
    width: 196px;
    height: 42px;
    text-indent: -300%;
    white-space: nowrap;
    overflow: hidden;
    position: relative;
}
.workSecretWrap h4::after{
    content: "";
    display: block;
    background: url("../img/bijutsuSecretNum.png") no-repeat 0 0;
    width: 31px;
    height: 42px;
    position: absolute;
    top: 0;
    right: 0;
}
.workSecretWrap:nth-of-type(1) h4::after{ background-position: 0 0;}
.workSecretWrap:nth-of-type(2) h4::after{ background-position: 0 -42px;}
.workSecretWrap:nth-of-type(3) h4::after{ background-position: 0 -84px;}
.workSecretWrap:nth-of-type(4) h4::after{ background-position: 0 -126px;}
.workSecretWrap:nth-of-type(5) h4::after{ background-position: 0 -168px;}
.workSecretWrap:nth-of-type(6) h4::after{ background-position: 0 -210px;}
.workSecretWrap:nth-of-type(7) h4::after{ background-position: 0 -252px;}
.workSecretWrap:nth-of-type(8) h4::after{ background-position: 0 -294px;}
.workSecretWrap:nth-of-type(9) h4::after{ background-position: 0 -336px;}
.workSecretWrap:nth-of-type(10) h4::after{ background-position: 0 -378px;}

/*
.cx_displaydevice.worksDetail .news .workSecretWrap .secretHdr:hover{
    background-color: #ff9d00;
}
.cx_displaydevice.worksDetail .drama .workSecretWrap .secretHdr:hover{ background-color: #15c7ff;}
.cx_displaydevice.worksDetail .variety .workSecretWrap .secretHdr:hover{ background-color: #5ecb22;}
.cx_displaydevice.worksDetail .sports .workSecretWrap .secretHdr:hover{ background-color: #6b59d4;}
*/


.workSecretWrap h5{
    font-size: 100%;
    padding: 12px 15px 12px;
    background-color: rgba(255,255,255,0.7);
    color: rgba(0,0,0,0.8);
    width: 662px;
    float: left;
    border-radius: 15px;
    box-sizing: border-box;
}
.news .workSecretWrap h5{ box-shadow: 0px 0px 3px #935700 inset;}
.drama .workSecretWrap h5{ box-shadow: 0px 0px 3px #006a8b inset;}
.variety .workSecretWrap h5{ box-shadow: 0px 0px 3px #386d19 inset;}
.sports .workSecretWrap h5{ box-shadow: 0px 0px 3px #332d55 inset;}

.workSecretWrap .secretHdr .plusIcn{
    float: right;
    width: 32px;
    height: 32px;
    position: relative;
    margin: 4px 12px 0;
    transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
	-moz-transform: rotate(0deg);
	-ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transition: all 200ms ease-out;
    display: none;
}
.workSecretWrap .secretHdr.show .plusIcn{
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transition: all 200ms ease-out;
}
.workSecretWrap .secretHdr .plusIcn span:nth-of-type(1){
    width: 4px;
    height: 32px;
    background-color: #fff;
    display: block;
    position: absolute;
    top: 0px;
    left: 14px;
}
.workSecretWrap .secretHdr .plusIcn span:nth-of-type(2){
    width: 32px;
    height: 4px;
    background-color: #fff;
    display: block;
    position: absolute;
    top: 14px;
    left: 0px;
}

.cx_smartphoneview .workSecretWrap h4{
    width: 242px;
    height: 55px;
    float: none;
    background-size: 196px 51px;
}
.cx_smartphoneview .workSecretWrap h4::after{
    width: 40px;
    height: 55px;
    background-size: 38px 508px;
}
.cx_smartphoneview .workSecretWrap:nth-of-type(2) h4::after{ background-position: 0 -51px;}
.cx_smartphoneview .workSecretWrap:nth-of-type(3) h4::after{ background-position: 0 -102px;}
.cx_smartphoneview .workSecretWrap:nth-of-type(4) h4::after{ background-position: 0 -151px;}
.cx_smartphoneview .workSecretWrap:nth-of-type(5) h4::after{ background-position: 0 -202px;}
.cx_smartphoneview .workSecretWrap:nth-of-type(6) h4::after{ background-position: 0 -252px;}
.cx_smartphoneview .workSecretWrap:nth-of-type(7) h4::after{ background-position: 0 -302px;}
.cx_smartphoneview .workSecretWrap:nth-of-type(8) h4::after{ background-position: 0 -353px;}
.cx_smartphoneview .workSecretWrap:nth-of-type(9) h4::after{ background-position: 0 -403px;}
.cx_smartphoneview .workSecretWrap:nth-of-type(10) h4::after{ background-position: 0 -454px;}

.cx_smartphoneview .workSecretWrap h5{ width: 542px; padding: 5px 10px;}

.workSecretWrap h4 + div{
    border-top: solid 1px #000;
}
.workSecretWrap > div,
.workTechWrap > div{
    padding: 20px 0 0;
}
/*.workSecretWrap > div.photoWrap,
.workSecretWrap > div.articleWrap,
.workSecretWrap > div.update,
.workSecretWrap > a{ display: none;}*/




/*#workDataWrap .photoWrap > .fLeft,
#workDataWrap .articleWrap > .fLeft,*/
.workSecretWrap .photoWrap > .fLeft,
.workSecretWrap .articleWrap > .fLeft{
    width: 49%;
    margin: 0 2% 1em 0;
}
#workDataWrap .photoWrap > .fLeft:nth-of-type(2n),
#workDataWrap .photoWrap > ul,
#workDataWrap .photoBase.s4-1:nth-of-type(2n){ margin-right: 0;}
#workDataWrap .articleWrap > .w100{ margin: 0 0 1em 0;}


#workDataWrap .photoBase.s1-1,
#workDataWrap .photoBase.s2-1,
#workDataWrap .photoBase.s4-1{
    height: auto;
    background-color: #666;
    position: relative;
}
#workDataWrap .photoBase.s1-1{ width: 100%;}
#workDataWrap .photoBase.s2-1,
#workDataWrap .photoWrap > ul,
#workDataWrap .photoBase.s4-1{
    width: 49%;
    margin: 0 2% 0 0;
}
#workDataWrap .photoBase.s2-1.fRight{ margin: 0 0 0 2%;}
#workDataWrap .photoWrap > .fLeft .photoBase.s2-1{
    width: 100%;
    margin: 0;
}
#workDataWrap .articleWrap > ul{ margin-top: 15px; margin-bottom: 15px;}
#workDataWrap .photoBase.s4-1{ margin-bottom: 8px;}

#workDataWrap .photoBase.s2-1:nth-of-type(2n){ margin: 0;}
#workDataWrap .photoBase.s1-1 img,
#workDataWrap .photoBase.s2-1 img,
#workDataWrap .photoBase.s4-1 img{
    width: 100%;
    height: auto;
    border: solid 1px #ddd;
    box-sizing: border-box;
}
/*#workDataWrap .photoBase.s1-1 + p,
#workDataWrap .photoBase.s2-1 + p,
#workDataWrap .photoWrap > p{
    line-height: 1.9;
}*/
.workSecretWrap .photoWrap > .fLeft > p,
.workSecretWrap .articleWrap > .fLeft > p,
.workSecretWrap .articleWrap > .w100 > p{
    line-height: 1.8;
    margin-top: 0.6em;
    text-align: justify;
}

.cx_smartphoneview .workSecretWrap .photoWrap > .fLeft > p,
.cx_smartphoneview .workSecretWrap .articleWrap > .fLeft > p,
.cx_smartphoneview .workSecretWrap .articleWrap > .w100{
    padding: 0 0.6em;
}

.workSecretWrap .photoBase.s1-1 p,
.workSecretWrap .photoBase.s2-1 p,
.workSecretWrap .photoBase.s4-1 p{
    font-size: 88%;
    background-color: #ddd;
    color: #333;
    padding: 5px;
    line-height: 1.4;
}
.workSecretWrap .articleWrap > .fLeft > p a,
.workSecretWrap .articleWrap > .w100 > p a
/*.workSecretWrap .photoBase.s1-1 + p a,
.workSecretWrap .photoBase.s2-1 + p a,
.workSecretWrap .photoWrap > p a*/{
    font-weight: bold;
    text-decoration: underline;
    color: #e3226c;
}
.workSecretWrap .articleWrap > .fLeft > p a:hover,
.workSecretWrap .articleWrap > .w100 > p a:hover
/*.workSecretWrap .photoBase.s1-1 + p a:hover,
.workSecretWrap .photoBase.s2-1 + p a:hover,
.workSecretWrap .photoWrap > p a:hover*/{
    color: #ff5294;
}

/*.cx_smartphoneview #workDataWrap .photoWrap > .fLeft,
.cx_smartphoneview #workDataWrap .photoBase.s2-1,*/
.cx_smartphoneview .workSecretWrap .photoWrap > ul,
.cx_smartphoneview .workSecretWrap .articleWrap > .fLeft{
    width: 100%;
    margin: 0 0 1em;
}

/*--------画像ローディング--------*/
#workDataWrap .photoBase.loading{
    min-height: 260px;
    background-image: url("../../img/loading.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 10%;
}


.btnClose{ text-align: center; display: none;}
/*#workDataWrap .workSecretWrap:nth-of-type(3) .btnClose{ display: block;}*/
.btnClose a{
    background-color: #eee;
    color: #555;
    font-weight: bold;
    line-height: 1.0;
    padding: 10px 20px;
    margin: 20px auto 40px;
    display: inline-block;
    border: solid 2px #bbb;
}
.btnClose a:hover{ opacity: 0.7;}


/*-------------デザインのヒミツ-------------*/
#workDataWrap .workTechWrap{
    margin: 40px auto 0;
    background-color: rgba(210,210,210,0.5);
    padding: 15px;
}

#workDataWrap .workTechWrap > div{ display: block;}
#workDataWrap .workTechWrap h4,
#workDataWrap .workTechWrap h4.cg{
    background: url("../img/designSecretTtl.png") no-repeat 0 0;
    width: 190px;
    height: 42px;
    text-indent: -300%;
    white-space: nowrap;
    overflow: hidden;
    margin: 5px 0 0;
}
#workDataWrap .workTechWrap h4.cg{ background: url("../img/cgSecretTtl.png") no-repeat 0 0;}
.news #workDataWrap .workTechWrap h4,
.news #workDataWrap .workTechWrap h4.cg{ background-position: 0 0;}
.drama #workDataWrap .workTechWrap h4,
.drama #workDataWrap .workTechWrap h4.cg{ background-position: 0 -42px;}
.variety #workDataWrap .workTechWrap h4,
.variety #workDataWrap .workTechWrap h4.cg{ background-position: 0 -84px;}
.sports #workDataWrap .workTechWrap h4,
.sports #workDataWrap .workTechWrap h4.cg{ background-position: 0 -126px;}

.cx_smartphoneview #workDataWrap .workTechWrap h4{
    background-size: 228px 202px;
    width: 228px;
    height: 51px;
}
.cx_smartphoneview .drama #workDataWrap .workTechWrap h4{ background-position: 0 -51px;}
.cx_smartphoneview .variety #workDataWrap .workTechWrap h4{ background-position: 0 -101px;}
.cx_smartphoneview .sports #workDataWrap .workTechWrap h4{ background-position: 0 -152px;}

#workDataWrap .workTechWrap h5{
    font-size: 120%;
    padding: 10px 0 0;
    border-top: solid 1px #000;
    font-weight: normal;
}
#workDataWrap .workTechWrap h5 + div{ padding: 0;}
#workDataWrap .workTechWrap .jobIcn{
    width: 80px;
    height: 80px;
    background: url("../img/bijutuchan_icn.png") 0 0;
    background-color: #aaa;
    float: left;
    margin: 0 10px 0 0;
    border-radius: 50%;
}
#workDataWrap .workTechWrap .jobIcn.designer{ background-position: 0 0;}
#workDataWrap .workTechWrap .jobIcn.ap{ background-position: 0 -80px;}
#workDataWrap .workTechWrap .jobIcn.shinkoh{ background-position: 0 -160px;}
#workDataWrap .workTechWrap .jobIcn.dougu_l{ background-position: 0 -240px;}
#workDataWrap .workTechWrap .jobIcn.acryl{ background-position: 0 -320px;}
#workDataWrap .workTechWrap .jobIcn.clothes{ background-position: 0 -400px;}
#workDataWrap .workTechWrap .jobIcn.light{ background-position: 0 -480px;}
#workDataWrap .workTechWrap .jobIcn.make{ background-position: 0 -560px;}
#workDataWrap .workTechWrap .jobIcn.dougu_s{ background-position: 0 -640px;}
#workDataWrap .workTechWrap .jobIcn.deco{ background-position: 0 -720px;}
#workDataWrap .workTechWrap .jobIcn.flower{ background-position: 0 -800px;}
#workDataWrap .workTechWrap .jobIcn.frame{ background-position: 0 -880px;}
#workDataWrap .workTechWrap .jobIcn.plant{ background-position: 0 -960px;}

#workDataWrap .workTechWrap .jobIcn + p{
    margin-bottom: 20px;
}
#workDataWrap .workTechWrap .designerIcn{
    width: 60px;
    height: 60px;
    background-color: #c9c9c9;
    float: left;
    margin: 0 10px 0 0;
    border-radius: 50%;
    overflow: hidden;
}
#workDataWrap .workTechWrap .designerIcn img{ width: 100%; height: auto;}
.cx_smartphoneview #workDataWrap .workTechWrap .designerIcn{
    width: 90px;
    height: 90px;
}


#workDataWrap .workTechWrap .designerIcn p#abeki_s{
    position:absolute;
    bottom:-8px;
    left:0;right:0;
    margin:0 auto;
    background:#fff;
    width:40px;
    height:16px;
}
#workDataWrap .workTechWrap .designerIcn #abeki_s svg{
    height: auto;
    width: 55px;
    position: absolute;
    top: 2px;
    left: 7px;
}
.cx_smartphoneview #workDataWrap .workTechWrap .designerIcn p#abeki_s{
    width: 56px;
    height: 24px;
    bottom:-12px;
}
.cx_smartphoneview #workDataWrap .workTechWrap .designerIcn #abeki_s svg{
    height: auto;
    width: 85px;
}

#workDataWrap .workTechWrap .question{
    padding: 0 0 10px;
    line-height: 1.6;
    font-weight: bold;
}
#workDataWrap .workTechWrap .ansWrap{
    padding: 0 0 25px;
    line-height: 2.0;
}
#workDataWrap .workTechWrap .ansWrap a{ font-weight: bold; text-decoration: underline;}
#workDataWrap .workTechWrap .ansWrap a:hover{ color: #777;}

.cx_smartphoneview #workDataWrap .workTechWrap .photoBase.s2-1{
    margin-bottom: 25px;
    width: 100%;
    margin: 0 0 1em;
}

#workDataWrap .workTechWrap .photoBase p{
    color: #fff; background-color: #000;
    font-size: 88%;
    padding: 5px;
    line-height: 1.4;
}
#workDataWrap .workTechWrap .photoBase p a{
    color: #fff;
    text-decoration: underline;
}
#workDataWrap .workTechWrap .photoBase p a:hover{ color: #ddd;}


/* -------------- インタビュー -------------- */
#interviewAllWrap{
    border-bottom: solid 3px #60b630;
    margin-top: 3em;
}
#interviewAllWrap h4{
    background-color: #60b630;
    color: #fff;
    font-size: 130%;
    font-feature-settings: "palt";
    line-height: 1.4;
    padding: 0.5em;
    text-align: center;
}

/* --------- スタッフリスト --------- */
.staffPagerListWrap{ text-align: center;}
.staffPagerListWrap:nth-of-type(1){
    background: -moz-linear-gradient(top,  rgba(213,255,188,0.6) 0%, rgba(213,255,188,0.6) 1%, rgba(213,255,188,0) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(213,255,188,0.6)), color-stop(1%,rgba(213,255,188,0.6)), color-stop(100%,rgba(213,255,188,0)));
background: -webkit-linear-gradient(top,  rgba(213,255,188,0.6) 0%,rgba(213,255,188,0.6) 1%,rgba(213,255,188,0) 100%);
background: -o-linear-gradient(top,  rgba(213,255,188,0.6) 0%,rgba(213,255,188,0.6) 1%,rgba(213,255,188,0) 100%);
background: -ms-linear-gradient(top,  rgba(213,255,188,0.6) 0%,rgba(213,255,188,0.6) 1%,rgba(213,255,188,0) 100%);
background: linear-gradient(to bottom,  rgba(213,255,188,0.6) 0%,rgba(213,255,188,0.6) 1%,rgba(213,255,188,0) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#99d5ffbc', endColorstr='#00d5ffbc',GradientType=0 );

}
.cx_smartphoneview .staffPagerListWrap{
    width: 100%;
    overflow-x: scroll;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    overflow-scrolling: touch;
}
.staffPagerList{
    margin: 1em auto 1em;
    display: inline-block;
}
.staffPagerList li{
    float: left;
    margin: 0 9px;
}
.staffPagerList li div{
    width: 82px;
    height: 82px;
    border-radius: 50%;
    background-color: rgba(200,202,199,0.52);
    overflow: hidden;
}
.staffPagerList li div img{ width: 100%; height: auto;}

.cx_smartphoneview .staffPagerList{
    width: 840px;
}
.cx_smartphoneview .staffPagerList li div{
    width: 150px;
    height: 150px;
}

.staffPagerList li p{
    font-size: 86%;
    font-weight: bold;
    line-height: 1.2;
    text-align: center;
}
.staffPagerList li span{ font-size: 90%;}
.staffPagerList li a{
    display: block;
    border-bottom: solid 5px #bdbdbd;
}
.cx_displaydevice .staffPagerList li a:hover,
.staffPagerList li a.on{ border-bottom: solid 5px #60b630;}


.interviewWrap{
    border-top: dotted 4px #60b630;
    border-bottom: dotted 4px #60b630;
    padding-top: 1.6em;
}
/* --------- スタッフプロフィール --------- */
.facePhoto{
    float: left;
    width: 200px;
    height: 200px;
    margin: 0 22px 8px 0;
    background-color: #ccc;
}
.facePhoto img{ width: 100%; height: auto;}
#interviewAllWrap .position{
    font-weight: bold;
    line-height: 1.4;
}
#interviewAllWrap h5{
    font-size: 144%;
    line-height: 1.4;
    margin-bottom: 10px;
}
#interviewAllWrap h5 span{
    font-size: 80%;
}
/*#interviewAllWrap .profile{
    font-size: 94%;
    line-height: 1.6;
    background-color: rgba(0,0,0,0.14);
    padding: 10px 10px 8px;
    margin-bottom: 36px;
}*/

/* --------- インタビュー本文 --------- */
#interviewAllWrap .question{
    font-weight: bold;
    line-height: 1.6;
    margin-bottom: 10px;
}
#interviewAllWrap .ansWrap + .question{ margin-top: 30px;}
#interviewAllWrap .ansWrap p{ line-height: 2.0;}
#interviewAllWrap .ansWrap a{ font-weight: bold; text-decoration: underline;}
.cx_displaydevice #interviewAllWrap .ansWrap a:hover{ color: #777;}
#interviewAllWrap .ansWrap .name{
    float: left;
    font-weight: bold;
    color: #fff;
    background-color: #60b630;
    line-height: 1.8;
    padding: 0 10px;
    border-radius: 5px;
    margin: 0 8px 0 0;
}

#interviewAllWrap .photoWrap{ margin-bottom: 30px;}

#interviewAllWrap .photoBase1-1{ width: 100%;}
#interviewAllWrap .photoBase2-1,
#interviewAllWrap .photoBase4-1{
    width: 49%;
    margin: 0 2% 0 0;
    border: solid 1px #ccc;
    box-sizing: border-box;
}
#interviewAllWrap .photoBase2-1.fRight{ margin: 0 0 0 2%;}

#interviewAllWrap .photoWrap > .fLeft{
    width: 49%;
    margin: 0 2% 0 0;
}
#interviewAllWrap .photoWrap > .fLeft:nth-of-type(2n),
#interviewAllWrap .photoBase4-1:nth-of-type(2n){ margin:0;}
#interviewAllWrap .photoWrap > .fLeft .photoBase2-1{
    width: 100%;
    margin: 0;
}
#interviewAllWrap .photoBase4-1{ margin-bottom: 8px;}

#interviewAllWrap .photoBase2-1:nth-of-type(2n){ margin: 0;}
#interviewAllWrap .photoBase1-1 img,
#interviewAllWrap .photoBase2-1 img,
#interviewAllWrap .photoBase4-1 img{
    width: 100%;
    height: auto;
    border: solid 1px #ddd;
    box-sizing: border-box;
}
#interviewAllWrap .photoBase1-1 p,
#interviewAllWrap .photoBase2-1 p,
#interviewAllWrap .photoBase4-1 p{
    background-color: #000;
    font-size: 94%;
    color: #fff;
    line-height: 1.4;
    padding: 3px 6px;
}

#interviewAllWrap .update{
    font-size: 88%;
    margin-top: 20px;
    text-align: right;
}

.cx_smartphoneview #interviewAllWrap .photoBase2-1{
    width: 100%;
    float: none;
    margin: 0 0 30px;
}

/*-------------シェアボタン-------------*/
#snsShareBtn{ margin: 50px auto 0;}
#snsShareBtn li{
    width: 49.5%;
    float: left;
}
#snsShareBtn li:nth-of-type(1){
    margin-right: 1%;
}
#snsShareBtn li a{
    display: block;
    position: relative;
    text-align: center;
    color: #fff;
    font-size: 110%;
    font-weight: bold;
    text-shadow: -1px -1px 1px rgba(0,0,0,0.5);
    height: 60px;
    line-height: 60px;
    margin: 0 5px 0;
    padding: 0 0 0 30px;
    box-sizing: border-box;
}
#snsShareBtn li#twShare a{ background-color: #00aef4;}
#snsShareBtn li#fbShare a{ background-color: #3b579d;}
#snsShareBtn li#twShare a:hover{ background-color: #1bbeff;}
#snsShareBtn li#fbShare a:hover{ background-color: #305dcb;}
#snsShareBtn li a::before{
    content: "";
    display: block;
    width: 32px;
    height: 32px;
    position: absolute;
    top:50%;
    left: 20px;
    margin: -16px 0 0;
}
#snsShareBtn li#twShare a::before{ background: url("../../img/tw_icn.png") no-repeat 0 0; background-size: contain;}
#snsShareBtn li#fbShare a::before{ background: url("../../img/fb_icn.png") no-repeat 0 0; background-size: contain;}

.cx_smartphoneview #snsShareBtn li a{
    font-size: 90%;
    height: 80px;
    line-height: 80px;
}

/*-------------ページャー-------------*/
#pagerWrap{
    background-color: #fff;
    padding: 20px 0;
    border-top: solid 1px #ccc;
}
.cx_smartphoneview #pagerWrap{
    width: 100%;
    overflow-x: scroll;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    overflow-scrolling: touch;
}

#pagerWrap ul{
    width: 960px;
    margin: 0 auto;
    box-sizing: border-box;
}
#pagerWrap li{
    width: 145px;
    margin: 0 18px 0 0;
    float: left;
    overflow: visible;
}
#pagerWrap li:nth-last-of-type(1){ margin: 0;}

#pagerWrap li .photoBase{
    height: 145px;
    overflow: hidden;
    box-shadow: 1px 1px 10px rgba(0,0,0,0.2);
}
#pagerWrap li img{
    width: auto;
    height: 100%;
}
#pagerWrap li p{
    font-size: 88%; line-height: 1.2;
    font-weight: bold;
    padding-top: 0.5em;
}
#pagerWrap li a:hover p{
    text-decoration: underline;
}

.cx_smartphoneview #pagerWrap ul{
    width: 1050px;
    padding: 0 20px;
    box-sizing: content-box;
}
.cx_smartphoneview #pagerWrap li{ width: 160px;}
.cx_smartphoneview #pagerWrap li .photoBase{ height: 160px;}