@charset "UTF-8";


/* リンク枠 地色 */
.link-waku{
background:#f6f6f6;
border-radius:10px;
padding:15px;
}


/* 均等　2カラム */
.column2-50oya{
display:flex;
width:100%;
flex-wrap:wrap;
justify-content:space-between;
margin:0 auto;
padding:0px;
}
.column2-50{
text-align:left;
margin:0px 0px 20px 0px;
}
.column2-50:last-child{
margin:0px 0px 20px 0px;
}

.column2-50oya ul{
margin:0;
padding:0;
line-height:140%;
}
.column2-50oya ul li{
margin:0px 0px 5px 20px;
padding:0;
}
.column2-50oya ul li a{
text-decoration:none;
color:#515151;
}
.column2-50oya ul li a:hover{
color:#45bdcf;
}





/* 下層ページ用　共通コンテナー950pxまたは90% */
.container-narrow950common{
margin:0px auto 0px auto;
width:90%;
text-align:left;
}
/* 下層ページ用　共通コンテナー740pxまたは90% */
.container-narrow740common{
margin:0px auto 0px auto;
width:90%;
text-align:left;
}
/* 下層ページ用　共通コンテナー500pxまたは90% */
.container-narrow500common{
margin:0px auto 0px auto;
width:90%;
text-align:left;
}
	

/* 下層ページ用　実績 */
.works-list_4column{
width:95%;
margin: 0px auto 20px auto;
padding:0;
text-align:center;
font-size:13px;
}

.works-list_4column ul{
display:flex;
flex-wrap:wrap;
justify-content:space-between;
list-style:none;
margin:0;
padding:0px;
}
.works-list_4column ul li{
flex:1 0 45%;
text-align:left;
line-height:100%;
margin:5px 5px 5px 5px;
padding:0px 0px 0px 0px;
}
.works-list_4column ul li img{
width:100%;
max-width:680px;
margin:0px 0px;
border-radius:8px;
}


/* イラストレーター個別内　2カラム */

.illu-column2-oya{
width:90%;
display:flex;
flex-wrap:wrap;
justify-content:space-between;
margin:20px auto 0px auto;
padding:0px;

}
.illu-column2-l{
width:30%;
float:left;
text-align:left;

}
.illu-column2-l img{
width:100%;
max-width:200px;
}
.illu-column2-r{
width:65%;
float:left;
text-align:left;
}


/* イラストレーター 5角形チャート */
.illust-chart{
text-align:center;
margin:20px auto 0px auto;
}
.illust-chart img{
width:90%;
max-width:500px;
border-radius:8px;
}


/* イラストレーター 作品を見る */
.illust-more{
width:100%;
text-align:center;
margin:10px auto 10px auto;

}

.illust-more a{
display:block;
border-radius:5px;
background:#000000;
color:#ffffff;
padding:4px 5px 4px 5px;
text-decoration:none;
}
.illust-more a:hover{
color:#ffffff;
text-decoration:none;
background:#45bdcf;
}


/* 詳しく見る */
.contents-more{
width:100%;
text-align:center;
margin:25px auto 10px auto;

}

.contents-more a{
font-size:15px;
font-weight:bold;
display:inline;
border-radius:25px;
background:#000000;
color:#ffffff;
padding:13px 25px 13px 25px;
text-decoration:none;
}
.contents-more a:hover{
color:#ffffff;
text-decoration:none;
background:#45bdcf;
}


/* 制作実績　詳細ページ 1個並び */
.work-img-1ko,
.work-img-1ko-big,
.work-img-1ko-middle{
text-align:center;
margin:50px auto 0px auto;
width:90%;
}
.work-img-1ko ul,
.work-img-1ko-big ul,
.work-img-1ko-middle ul{
flex-wrap:wrap;
justify-content:space-between;
list-style:none;
margin:0;
padding:0px;
}
.work-img-1ko ul li,
.work-img-1ko-big ul li,
.work-img-1ko-middle ul li{
flex:1 0 95%;
text-align:left;
line-height:100%;
margin:8px 8px 8px 8px;
padding:0px 0px;
}

.work-img-1ko ul li img,
.work-img-1ko-big ul li img,
.work-img-1ko-middle ul li img{
width:100%;
max-width:800px;
margin:0px 0px;
}


/* 制作実績　詳細ページ 2個並び */
.work-img-2ko{
text-align:center;
margin:50px auto 0px auto;
width:90%;
}
.work-img-2ko ul{
display:flex;
flex-wrap:wrap;
justify-content:space-between;
list-style:none;
margin:0;
padding:0px;

}
.work-img-2ko ul li{
flex:1 0 95%;
text-align:left;
line-height:100%;
margin:8px 8px 8px 8px;
padding:0px 0px;
}

.work-img-2ko ul li img{
width:100%;
max-width:800px;
margin:0px 0px;
}

/* 制作実績・クレジット */
.creator{
border-bottom:1px #4d4d4d dotted;
text-align:center;
padding:20px 0px 20px 0px;
}
.creator a{
text-decoration:underline;
color:#515151;
}
.creator a:hover{
text-decoration:none;
color:#45bdcf;
}



/* イラストレーター紹介　アバターを円でトリミング */
.illustrater-avatar_circle{
border-radius:50%;
}





/* 流れの画像 */
img.flow-img{
width:100%;
max-width:650px;
}




/* 挿絵を半分で表示 */
img.illust50{
width:70%;
}
/* 挿絵を90で表示 */
img.illust90{
width:70%;
}


/* ワークフロー */
.flow-waku-all{
margin:40px 0px 10px 0px;
}
.flow-number{
font-family: 'Roboto Condensed', sans-serif;
text-align:center;
font-size:25px;
line-height:100%;
color:#ffffff;
padding:0px 0px 0px 0px;
margin:0px 0px 10px 0px;
width:40px;
}
.flow-number-line{

background-color:#45bdcf;
color:#ffffff;
width:40px;
height:40px;
display:flex;
border-radius:17px;
justify-content: center;
align-items: center;
float:left;
}
.flow-moji-waku{
float:left;
width: calc(100% - 60px);
padding:0px 0px 0px 10px;
}
.flow-title{
font-size:24px;
margin:0px 0px 5px 0px;
}
.flow-text{
}
.flow-illust{
clear: both;
width:100%;
text-align:center;
padding-top:20px;
}
.flow-illust img{
width:75%;
max-width:300px;
}
.flow-waku-all:after{
content: "";
clear: both;
height: 0;
display: block;
visibility: hidden;
}

.flow-line{
border-top:#cccccc 2px dotted;
margin:7px 0px 7px 0px;
}




/* 枠の中で70パー */
.haba70{
width:70%;
}
/* 枠の中で80パー */
.haba80{
width:80%;
}
/* 枠の中で90パー */
.haba90{
width:90%;
}
/* 枠の中で100パー */
.haba100{
width:100%;
}


/* レスポンシブ・ブレークポイント */
	
@media(min-width:768px){




/* 均等　2カラム */

.column2-50oya{
width:100%;
display:flex;
flex-wrap:wrap;
justify-content:space-between;
margin:0 auto;
padding:0px;

}
.column2-50{
flex:1;
text-align:left;
margin:0px 40px 20px 0px;
text-align:justify
}
.column2-50:last-child{
margin:0px 0px 20px 0px;
}
		
		
		
		
		
/* 下層ページ用　共通コンテナー950pxまたは90% */
.container-narrow950common{
margin:0px auto 0px auto;
width:90%;
max-width:950px;
text-align:left
}
/* 下層ページ用　共通コンテナー740pxまたは90% */
.container-narrow740common{
margin:0px auto 0px auto;
width:90%;
max-width:740px;
text-align:left
}

/* 下層ページ用　共通コンテナー500pxまたは90% */
.container-narrow500common{
margin:0px auto 0px auto;
width:90%;
max-width:500px;
text-align:left
}


/* 下層ページ用　実績 */
.works-list_4column{

width:100%;
max-width:1400px;
margin: 0px auto 0px auto;
padding:0;
text-align:center;
}

.works-list_4column ul{
display:flex;
flex-wrap:wrap;
justify-content:space-between;
list-style:none;
margin:0;
padding:0px;
}
.works-list_4column ul li{
flex:1 0 20%;
text-align:left;
margin:1px;
margin:5px 5px 5px 5px;
}
.works-list_4column ul li img{
width:100%;
max-width:600px;
margin:0px 0px;
border-radius:8px;
}


			
			
			
/* 制作実績　詳細ページ 1個並び */
.work-img-1ko ul{
flex-wrap:wrap;
justify-content:space-between;
list-style:none;
margin:0;
padding:0px;
}
.work-img-1ko ul li{
text-align:center;
margin:10px 0px 30px 0px;
}
.work-img-1ko ul li img{
width:100%;
max-width:460px;
}
/* 制作実績　詳細ページ 1個並び-特大 */
.work-img-1ko-big ul{
flex-wrap:wrap;
justify-content:space-between;
list-style:none;
margin:0;
padding:0px;
}
.work-img-1ko-big ul li{
text-align:center;
margin:10px 0px 30px 0px;
}
.work-img-1ko-big ul li img{
width:100%;
max-width:870px;
}
.work-img-1ko-big ul li.widthmax700 img{
width:100%;
max-width:700px;
}
.work-img-1ko-big ul li.widthmax800 img{
width:100%;
max-width:800px;
}

/* 制作実績　詳細ページ 1個並び-中くらい600px */
.work-img-1ko-middle ul{
flex-wrap:wrap;
justify-content:space-between;
list-style:none;
margin:0;
padding:0px;
}
.work-img-1ko-middle ul li{
text-align:center;
margin:10px 0px 30px 0px;
}
.work-img-1ko-middle ul li img{
width:100%;
max-width:600px;
}


/* 制作実績　詳細ページ 2個並び */
.work-img-2ko ul{
display:flex;
flex-wrap:wrap;
justify-content:space-between;
list-style:none;
margin:0;
padding:0px;
}
.work-img-2ko ul li{
flex:1 0 45%;
text-align:center;
margin:10px 5px 10px 5px;
}
.work-img-2ko ul li img{
width:100%;
max-width:460px;
}




/* 挿絵を半分で表示 */
img.illust50{
width:50%;
}
/* 挿絵を90で表示 */
img.illust90{
width:90%;
}


/* ワークフロー */
.flow-waku-all{
}
.flow-number{
font-family: 'Roboto Condensed', sans-serif;
text-align:center;
font-size:40px;
line-height:100%;

padding:0px 0px 0px 0px;
margin:0px 0px 20px 0px;
width:70px;
}
.flow-number-line{
background-color:#45bdcf;
color:#ffffff;
width:70px;
height:70px;
display:flex;
border-radius:30px;
justify-content: center;
align-items: center;
float:left;
}
.flow-moji-waku{
float:left;
width: calc(100% - 400px);
padding:0px 0px 0px 30px;
}
.flow-title{
font-size:25px;
padding:0px;
margin:0px 0px 2px 0px;
}
.flow-text{
}
.flow-illust{
clear: none;
float:left;
width:300px;
text-align:right;
padding-top:0px;
margin-top:0;
}
.flow-illust img{
width:100%;
max-width:290px;
}
.flow-waku-all:after{
content: "";
clear: both;
height: 0;
display: block;
visibility: hidden;
}
.flow-line{
border-top:#cccccc 2px dotted;
margin:20px 0px 20px 0px;
}




}