/*====================================================================================*/
/* Common
/*====================================================================================*/

/*====================================================================================*/
/* PC 
/*====================================================================================*/
.ContentsLayoutWrapper{
	padding-top:42px;
	padding-left:260px;
	padding-right:50px;
}
/* __ DesignerMain ___________ */
.DesignerMainArea{
	margin-bottom:75px;
}
.DesignerMainImage{
	display:inline-block;
}
.DesignerMainImageArea{
	display:inline-block;
    margin-right: 20px;
}
.DesignerMainImage img{
    width: calc( ( 100vw - 310px - ( 25px * 4 ) ) / 4 );
}
.DesignerMainCaption{
	display:inline-block;
	width: 800px;
    vertical-align: top;
}
.DesignerMainTitle{
	margin-bottom:10px;
}
.DesignerMainDescription{
	margin-bottom:15px;
}
.DesignerMainDescription a{
	text-decoration:none;
	color:black;
}
DesignerMainDescription img{
    width: 100% !important;
    height: auto;
}
/* __ DesignerProduct ___________________*/
.DesignerProductArea{
    text-align: center;
	margin-bottom:75px;
    
}
.DesignerProductTitle{
    margin-bottom: 20px;
    text-align: left;
}
.DesignerProductContentsWrapper{
    text-align: left;
}
.DesignerProductListWrapper{
	display: inline-block;
    text-align: center;
	vertical-align:top;
    padding-left: 0px;
    padding-right: 20px;
	margin-bottom: 30px;
}
.DesignerProductListWrapper a{
	text-decoration:none;
	color:black;
}
.DesignerProductListImage{
    width: calc( ( 100vw - 310px - ( 25px * 4 ) ) / 4 );
	height: calc( ( ( 100vw - 310px - ( 25px * 4 ) ) / 4 ) * 0.75 );
    overflow: hidden;
    position: relative;
}
.DesignerProductListImage img{
	min-width: 100%;
    min-height: 100%;
	width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.DesignerProductListImage > .SExp{
    
}
.DesignerProductListImage > .SExp img{
    width: 100px;
    height: auto;
    min-width: initial;
    min-height: initial;
    top: 100%;
    left: 100%;
    transform: translate(calc(-100% - 5px),calc(-100% - 10px));
}
.DesignerSubCaptionParts{
	width: calc( ( 100vw - 310px - ( 25px * 4 ) ) / 4 );
}
.DesignerProductCaptionArea{
	
	
}
/* __ DesignerMaker ___________________*/
.DesignerMakerArea{
    text-align: center;
	margin-bottom:75px;
    
}
.DesignerMakerTitle{
    margin-bottom: 20px;
    text-align: left;
}
.DesignerMakerContentsWrapper{
    text-align: left;
}
.DesignerMakerListWrapper{
	display: inline-block;
    text-align: center;
    padding-left: 0px;
    padding-right: 20px;
    margin-bottom: 30px;
}
.DesignerMakerListWrapper a{
	text-decoration:none;
	color:black;
}
.DesignerMakerListImage{

}
.DesignerMakerListImage img{
    width: calc( ( 100vw - 310px - ( 25px * 4 ) ) / 4 );
    border: solid 1px #dddddd;
}

.DesignerMakerCaptionArea{

}

@media only screen and (max-width: 1380px) {

/* Profile */
.DesignerMainImageArea{
	margin-bottom:10px;
}
.DesignerMainImage img {
	width: calc( ( 100vw - 310px - ( 25px * 3 ) ) / 3 );
}
/* Product */
.DesignerProductListImage{
	width: calc( ( 100vw - 310px - ( 25px * 3 ) ) / 3 );
	height: calc( ( 100vw - 310px - ( 25px * 3 ) ) / 3 * 0.75);
}
.DesignerProductListImage img{
}
.DesignerSubCaptionParts{
	width: calc( ( 100vw - 310px - ( 25px * 3 ) ) / 3 );	
}
.DesignerProductListImage > .SExp{
    
}
.DesignerProductListImage > .SExp img{
    width: 100px;
    height: auto;
    min-width: initial;
    min-height: initial;
    top: 100%;
    left: 100%;
    transform: translate(calc(-100% - 5px),calc(-100% - 10px));
}
/* Maker */
.DesignerMakerListImage img {
	width: calc( ( 100vw - 310px - ( 25px * 3 ) ) / 3 );	
    border: solid 1px #dddddd;
}
}


/*====================================================================================*/
/* スマフォ縦表示
/*====================================================================================*/
/* ipad pro? */
@media only screen and (max-width: 1024px) and (orientation:portrait){
.ContentsLayoutWrapper{
	padding-top:130px;
	margin-left: 20px;
	margin-right: 20px;
	padding-left: 0;
	padding-right: 0;
}
.DesignerMainImageArea {
	margin-bottom: 10px;
	margin-right: 0;
}
/* MainImage */
.DesignerMainImage img{
	width: 100%;
}

/* Thumnail */
.DesignerProductListWrapper{
	display: inline-block;
    text-align: center;
    vertical-align:top;
    padding-left: 0px;
    padding-right: 0;
    margin-bottom: 50px;
}
.DesignerMainCaption {
	display: inline-block;
	width: 100%;
}			
.DesignerProductListImage{
		width: 100%;
        height: initial;
        overflow: initial;
}
.DesignerProductListImage img{
		width: 100%;
        height: calc((50vw - 30px) * 0.75);
        object-fit: cover;
        position: initial;
        transform: initial;
}
.DesignerSubCaptionParts{
	width: 100%;
}
/* Maker */
.DesignerProductArea {
    text-align: center;
    margin-bottom: 75px;
    margin-left: -20px;
    margin-right: -20px;
}
.DesignerMakerListWrapper{
        padding-left: 0px;
        padding-right: 20px;
        vertical-align: top;
        width: calc((50vw - 33px));
}
.DesignerMakerListImage img{
	width: calc( ( 50vw - 50px ));
}
.DesignerProductContentsWrapper {
    text-align: left;
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 20px;
    padding-left: 20px;
    padding-right: 20px;
}
.DesignerMakerArea{
	margin-right: -20px;
}
}
/*====================================================================================*/
/* スマフォ　横表示
/*====================================================================================*/
@media only screen and (max-width: 1024px) and (orientation:landscape){
.ContentsLayoutWrapper{
	padding-left:100px;
}
.DesignerMainImage img {
    width: calc( ( 100vw - 180px - ( 25px * 3 ) ) / 3 );
}
.DesignerProductListImage {
    width: calc( ( 100vw - 180px - ( 25px * 3 ) ) / 3 );
    height: calc( ( 100vw - 180px - ( 25px * 3 ) ) / 3 * 0.75);
}
.DesignerSubCaptionParts {
    width: calc( ( 100vw - 180px - ( 25px * 3 ) ) / 3 );
}
.DesignerMakerListImage img {
    width: calc( ( 100vw - 180px - ( 25px * 3 ) ) / 3 );
    border: solid 1px #dddddd;
}

}

