@charset "UTF-8";

/* ---------------------------------------------
	デザイナー紹介ページ
--------------------------------------------- */
h2.pageTtl{
    background-size: 490px;
    background-position: center -366px;
}

/* ----------- プロフィール ----------- */
.persDataWrap{
    padding: 20px 0 20px;
}
.persDataWrap > div,
.persDataWrap > p,
.persDataWrap > ul{
    margin-bottom: 20px;
    line-height: 1.7;
}
.persDataWrap .profile{
    margin-bottom: 20px;
    line-height: 1.7;
    display: flex;
    flex-wrap: wrap;
}
.persDataWrap .profile > *{
    flex-shrink: 0;
}
.persDataWrap .persImg{
    width: 300px;
    height: 300px;
    background-color: #aaa;
    margin: 0 20px 10px 0;
    border-radius: 50%;
    overflow: hidden;
}
.profile__data{
    width: calc(100% - 320px);
}
.persDataWrap .profile .name{ font-size: 130%; line-height: 1.4;}
.persDataWrap .profile .name #abeki{ height: 20px; width: 94px;}
.cx_smartphoneview .persDataWrap .profile .name #abeki{ height: 30px; width: auto;}


.persDataWrap .profile .comment{
    margin: 20px;
}

.cx_smartphoneview .persDataWrap{ padding: 0 0 20px;}
.cx_smartphoneview .persDataWrap .profile{
    display: block;
}
.cx_smartphoneview .profile__data{ width: 100%;}
.cx_smartphoneview .persDataWrap .persImg{
    float: none;
    margin: 0 auto 10px;
}
.cx_smartphoneview .persDataWrap .profile .name,
.cx_smartphoneview .persDataWrap .profile .year{ text-align: center;}

.persDataWrap .profile dl{ margin: 30px 0 0;}
.persDataWrap .profile dt{
    background-color: #000;
    color: #fff;
    font-weight: bold;
    display: inline-block;
    line-height: 1.0;
    padding: 5px;
    margin: 0 20px 10px 0;
    float: left;
    width: 140px;
    position: relative;
}
.persDataWrap .profile dt::after{
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    right: -16px;
    margin-top: -12px;
    width: 0px;
	height: 0px;
	border-style: solid;
	border-width: 12px 0 12px 16px;
	border-color: transparent transparent transparent #000;
}
.persDataWrap .profile dd{
    margin: 0 0 10px;
    line-height: 1.8;
    padding-left: 180px;
}

.cx_smartphoneview .persDataWrap .profile dl{ margin: 10px 10px 0;}
.cx_smartphoneview .persDataWrap .profile dt{
    float: none;
    width: 97%;
    margin: 0 0 5px 0;
}
.cx_smartphoneview .persDataWrap .profile dd{ padding-left: 0;}


/* ----------- 仕事 ----------- */
#contentAllWrap #worksListWrap{
    padding: 0 0 60px;
}
#worksListWrap > ul{
    display: flex;
    flex-wrap: wrap;
}
#worksListWrap > ul li{
    flex-shrink: 0;
    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;
}
#worksListWrap > ul li a:hover p{ text-decoration: underline;}

#worksListWrap > ul li.comingsoon{
    height: 225px;
    background-color: #eee;
}

.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;}

.cx_smartphoneview #worksListWrap > ul{ width: 100%;}
/*.cx_smartphoneview#worksListWrap > ul li img{ margin-left: -76px;}*/
.cx_smartphoneview #worksListWrap > ul li.comingsoon{ height: 200px;}
.cx_smartphoneview #worksListWrap > ul li.none{ display: none;}

#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: 1180px;
    margin: 0 auto;
    box-sizing: border-box;
}

.cx_smartphoneview #pagerWrap ul{
    width: 1400px;
    padding: 0 20px;
    box-sizing: content-box;
}

#pagerWrap li{
    width: 78px;
    height: 78px;
    margin: 0 10px 0.5em 0;
    /*background-color: #aaa;*/
    float: left;
    overflow: hidden;
    border-radius: 50%;
}
#pagerWrap li:nth-last-of-type(1){ margin: 0;}

#pagerWrap li a{
    display: block;
    position: relative;
}
#pagerWrap li img{
    width: 100%;
    height: auto;
}

#pagerWrap li a::after{
    content: "";
    display: block;
    position: absolute;
    border: none;
    width: 70px;
    height: 70px;
    position: absolute;
    top: 4px;
    left: 4px;
    border-radius: 50%;
    box-sizing: border-box;
    -ms-transition: border ease-out 0.18s;
    -webkit-transition: border ease-out 0.18s;
    transition: border ease-out 0.18s;
}
#pagerWrap li a:hover::after{
    border: solid 3px #fff;
    -ms-transition: border ease-out 0.18s;
    -webkit-transition: border ease-out 0.18s;
    transition: border ease-out 0.18s;
}