@charset "utf-8";
/* CSS Document */

/*ここからメイン*/

/*トップタイトル部分*/
#title_area {
	width:100%;
	height:200px;
	padding:0 30px;
	box-sizing:border-box;
	background-color:#d9b364;
}

/*タイトルペンギン部分*/
#pg_img {
	width:30%;
	height:200px;
	float:left;
	box-sizing:border-box;
/*	background-color:#C90;*/
}

#pg_img img {
	display:block;
	margin:0 auto;
	min-width:80%;
	max-height:190px;
}

/*タイトルイメージ部分*/
#title {
	width:70%;
	height:200px;
	padding:50px 0 30px 0;
	float:right;
	box-sizing:border-box;
/*	background-color:#C6F;*/
}

#title img {
	display:block;
	margin:0 auto;
	width:100%;
	max-height:140px;
}
/*トップタイトル部分ここまで*/



/*Web作品部分ここから*/
#works_area {
	width:80%;
/*	height:800px;*/
	margin: 0 auto;
	box-sizing:border-box;
/*	background-color:#33CCFF;*/
}

.contents_area {
	width:100%;
/*	height:400px;*/
	margin:0 auto;
	box-sizing:border-box;
/*	background-color:#FFFF99;*/	
}

.sub_title {
	margin:0 auto;
	padding-left:20px;
	border-bottom:5px solid #d9b364;
/*	background-color:#fff;*/
}

.sub_title h3 {
	margin-top:30px;
	color:#d9b364;
	font-size:1.5em;
}


/*作品のボックス一つ分の設定*/
.works_link {
	width:90%;
	margin:30px auto 0 auto;
	box-sizing:border-box;
/*	background-color:#396;*/
}

.dtp_link {
	width:90%;
	margin:30px auto 0 auto;
	box-sizing:border-box;
/*	background-color:#396;*/
}

/*作品の画像*/
.link_img_area {
	width:95%;
	height:200px;
	margin:0 auto;
	box-sizing:border-box;
	border-radius:20px;
overflow: hidden;
cursor: pointer;
/*	background-color:#CC3;*/
}

.link_img_area img{
	width:100%;
	height:100%;
	object-fit:cover;
	border-radius:20px;
transition-duration: 0.5s;
}

.link_img_area:hover img{
  transform: scale(0.95);
  transition-duration: 0.5s;

}





.dtp_img_area {
	width:95%;
	height:200px;
	margin:0 auto;
	box-sizing:border-box;
	border-radius:20px;
overflow: hidden;
cursor: pointer;
/*	background-color:#CC3;*/
}

.dtp_img_area img{
	width:100%;
	height:100%;
	object-fit:cover;
	border-radius:20px;
	transition-duration: 0.5s;
}

.dtp_img_area:hover img{
  transform: scale(0.9);
  transition-duration: 0.5s;

}


.link_btn_area {
	display: none;
}

/*作品のページボタン部分*/
.link_btn_area {
	width:95%;
	height:50px;
	margin:0 auto;
	padding-top:15px;
	box-sizing:border-box;
/*	background-color:#CFC;*/
}

.link_btn_area a {
	color:#fff;
}

.link_btn {
	width:150px;
	margin:0 auto;
	border-radius:20px;
}

.link_btn p {
	text-align:center;
	padding:5px;
	border-radius:20px;
	background-color:#ed9e40;
}

.link_btn p:hover{
	background-color:#a35424;
}
/*作品のボックス一つ分の設定ここまで*/

/*Web作品部分ここまで*/


/*topに戻るボタンここから*/

#top_btn_area {
	width:80%;
	height:150px;
	margin:0 auto;
	padding-top:45px;
	box-sizing:border-box;
/*	background-color:#33C;*/
}

#top_btn_area a {
	color:#fff;
}

#top_rt_btn {
	width:140px;
	height:50px;
	margin:0 auto;
	padding-top:15px;
	border-radius:20px;
	box-sizing:border-box;
}


/*ぴょこ部分*/
#bou1-s{
	position:absolute;
	z-index:1;
	left:44%;
	bottom:60px;
	transition:0.5s;
}

#top_rt_btn:hover~#bou1-s{
	transform:translate(0px,-30px);
}
/*ぴょこ部分*/

#top_rt_btn p {
	text-align:center;
	border-radius:20px;
	padding:5px;
	position:relative;/*ぴょこ部分*/
	z-index:2;/*ぴょこ部分*/
	box-sizing:border-box;
	background-color:#e4aa87;
}
	
#top_rt_btn p:hover {
	background-color:#e24040;
}


/*topに戻るボタンここまで*/


.clearfix::after{
	content:"";
	display:block;
	clear:both;
}

/*ここまでメイン*/


/*ここまでスマホ設定*/





/*●●●●●●●●●●ここからタブレット・ｐｃ設定●●●●●●●●●●*/

@media screen and (min-width:768px) {
	

/*タブレット・PC・トップ(タイトル)部分ここから*/

#title_area {
	width:60%;
	height:250px;
	margin:0 auto 60px auto;
  	border-radius: 0 0 20px 20px;
	background-color:#d9b364;
}
/*タブレット・PC・タイトルペンギン部分*/
#pg_img {
	width:30%;
	height:250px;
	float:left;
/*	background-color:#C90;*/
}

#pg_img img {
	display:block;
	margin:0 auto;
	min-width:80%;
	max-height:240px;
}

/*タブレット・PC・タイトルイメージ部分*/
#title {
	width:70%;
	height:250px;
	float:right;
/*	background-color:#C6F;*/
}

#title img {
	display:block;
	margin:0 auto;
	width:100%;
	max-height:190px;
}
/*タブレット・PC・トップ(タイトル)部分ここまで*/	



/*タブレット・PC・Web作品部分ここから*/

.sub_title {
	width:90%;
}


.sub_title h3 {
	font-size:2em;
}


#works_area {
	width:90%;
/*	background-color:#66B9CC;*/
}
	
.flex_area {
	display: flex;
}

.works_float_area {
	width:90%;
	margin:0 auto 30px auto;
	display:flex;
/*	background-color:#33FFCC;*/	
}
	
.web_float_area {
	width:90%;
	margin:0 auto;
	display:flex;
/*	background-color:#6666CC;*/	
}
	
.last_float_area2 {
	width:50%;
	display: flex;
	margin-left:30px;
/*	background-color:#1A1248;*/
}
	
	
.last_float_area {
	width:45%;
	display: flex;
	margin-left:5%;
/*	background-color:#1A1248;*/
}
	
	
.works_link {
	width:800px;
	min-height:100px;
	margin-bottom:30px;
/*	background-color:#339999;*/
}
	
.dtp_link {
	max-width:300px;
	min-height:100px;
/*	background-color:#893032;*/
}

.dtp_img_area {
	width:90%;
	height:150px;
	margin:0 auto;
	box-sizing:border-box;
/*	background-color:#CC3;*/
}



#top_btn_area {
	height:150px;
/*	padding-top:0px;*/
}


#bou1-s{
	left:47%;
}


/*タブレット・PC・Web作品部分ここまで*/

	
}
/*●●●●●●●●●●ここまでタブレット・ｐｃ設定●●●●●●●●●●*/



/*■■■■■■■■■■■ここからｐｃ設定■■■■■■■■■■*/
@media screen and (min-width:950px) {


/*PC・TOP(タイトル)部分*/

#main_top {
	height: 490px;
/*	background-color:#fff;*/
}
	
/*PC・タイトルイメージ部分*/	
	
#title img {
	margin:0 0 0 0;
	width:90%;
/*	background-color:#333366;*/
}


/*PC・Web作品部分ここから*/
.works_link {
	max-width:800px;
	max-height:400px;
	margin-bottom:30px;
/*	margin-left:10px;*/
}
.dtp_link {
	max-width:300px;
	min-height:100px;
/*	background-color:#893032;*/
}

.dtp_img_area {
	width:90%;
	height:150px;
	margin:0 auto;
	box-sizing:border-box;
/*	background-color:#CC3;*/
}

/*PC・作品の画像*/
.link_img_area {
	width:95%;
	height:300px;
	margin:0 auto;
/*	background-color:#CC3;*/
}

#bou1-s{
	left:48%;
}

/*Web作品部分ここまで*/	


}
/*■■■■■■■■■■■ここまでｐｃ設定■■■■■■■■■■*/