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


/*ここからメイン*/

/*作品紹介部分*/

#works_site_area {
	width:80%;
	margin: 0 auto;
	box-sizing:border-box;
/*	background-color:#33CCFF;*/
}

.contents_area {
	width:100%;
	margin:0 auto;
	box-sizing:border-box;
/*	background-color:#FFFF99;	*/
}
	
	
	
/*作品紹介タイトル部分*/
	
.sub_title {
	margin:0 auto;
	padding-top: 40px;
	box-sizing:border-box;
/*	background-color:#39C;*/
}

#sub_t {
	color:#d9b364;
	font-size:1.4em;
	padding-top: 30px;
	border-bottom:5px solid #d9b364;
	box-sizing:border-box;
/*	background-color:#C63;*/
}

#sub_p {
	font-size:0.7em;
}

/*サイトを開くボタン共通部分設定*/
.site_btn {
	width:140px;
/*	background-color:#33CCFF;*/
}

.site_btn  a {
	color:#ffffff;
}

.site_btn p {
	text-align:center;
	padding:5px;
	background-color:#f38948;
	border-radius:20px;
	font-size:1em;
}

.site_btn p:hover {
	background-color:#a35424;
}
/*サイトを開くボタン共通部分設定ここまで*/




/*サイトを開くボタン・上にある分のみ適用設定*/
#site_btn1 {
	margin-top:5px;
}

.size_text p {
	font-size:0.8em;
	margin:5px 7px 0 7px;
	box-sizing:border-box;
/*	background-color:#FF6;*/
}




/*サイトを開くボタン・下にある分のみ適用設定*/
#site_btn2 {
	margin:0 auto;
}

.size_text2 {
	font-size:0.8em;
	text-align:center;
}


/*作品紹介タイトル部分ここまで*/

/*作品紹介画像部分ここから*/


h3 {
	width: 80%;
	margin:50px auto 0 auto;
	border-bottom:5px solid #EB7327;
/*	background-color:#006666;*/
}


.img_area {
	width:80%;
	margin:0 auto;
	padding:30px 0 0 0;
	box-sizing:border-box;
/*	background-color:#006666;*/
}

.img {
	box-sizing:border-box;
	border:1px solid #4e4e4e;
/*	background-color:#FF3399;*/
}

dl {
	margin-bottom:20px; 
}

.img img {
	width:100%;
}

.img_2 {
	margin:10px auto 10px auto;
}


.img_2 video {
	width:100%;
	border:1px solid #4e4e4e;
}


/*作品紹介画像部分ここまで*/


/*作品紹介文章部分ここから*/


#commentary_area {
	padding:20px;
	border-radius:20px;
	background-color:#f0e7d1;
}

.commentary_text {
	margin-bottom:20px;
/*	background-color:#366;*/
}

.margin_2 {
	margin-bottom:0;
}

.commentary_title {
	font-size:1em;
	border-bottom:1px solid #4e4e4e;
}

.commentary_p {
	margin:0.5em 1em 1em 1em;
	font-size:0.8em;
}

/*作品紹介文章部分ここまで*/




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

/*追加部分*/
#works_btn_area {
	width:100%;
	height:150px;
	margin:0 auto;
	padding-top:45px;
	display:flex;
	box-sizing:border-box;
/*	background-color:#33C;*/
}

#works_btn_area a {
	color:#fff;
}

#btn_flex {
	margin:0 auto;
	display:flex;
	box-sizing:border-box;
}

.sub_btn {
	padding:0 30px;
}


.sub_btn p {
	width:50px;
	height:50px;
	padding-top:8px;
	text-align:center;
	line-height:1em;
	box-sizing:border-box;
	border-radius:10px;
	background-color:#c2ad78;
}

.sub_btn p:hover {
	background-color:#f6cd69;
}
/*追加部分ここまで*/

#works_rt_btn {
	width:140px;
	height:35px;
	margin:15px auto 0 auto;
	border-radius:20px;
	box-sizing:border-box;
/*		background-color:#3C9;*/

}


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

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


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

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


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

/*ここまでメイン*/

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





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

@media screen and (min-width:768px) {
	
/*タブレット・PC・作品部分ここから*/

/*タブレット・PC・作品タイトル部分ここから*/
.sub_title {
	width:90%;
	box-sizing:border-box;
	border-bottom:5px solid #d9b364;
}

.sub_t_area {
	float:left;
}

#sub_t {
	font-size:1.8em;
	border-bottom: 0px none;
}

#sub_p {
	font-size:0.7em;
}

.btn_box {
	float:right;
/*	background-color:#999966;*/
}

.btn_box p {
	padding-top:5px;
	box-sizing:border-box;
/*	background-color:#FF6;*/
}


.sub_title {
	height:120px;
}

.size_text p {
	text-align:center;
}


#bou1-s{
	left:47%;
}




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

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

.img_area {
	width:80%;
	box-sizing:border-box;
	display: flex;
/*	background-color:#9B1416;*/
}

.img {
	width:80%;
/*	margin:0 auto;*/
	box-sizing:border-box;
/*	background-color:#FF3399;*/
}

.img_2 {
	width:100%;
	margin:0 auto;
}


.img_2 video {
	width:100%;
	border:1px solid #4e4e4e;
}


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


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

#commentary_area {
	width:90%;
	margin:0 auto;
}

#commentary_flex {
	display:flex;
	margin:0 auto;

}

.commentary_text {

}

.commentary_float_box {
	width:50%;
/*	background-color:#6CC;*/
}

.margin_1 {
	margin-left:20px;
}

.margin_3 {
	margin-bottom:0;
}


.commentary_title {
	border-bottom:1px solid #4e4e4e;
}

.commentary_p {
	margin:0.5em 1em 1em 1em;
}

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

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



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


/*PC・DTP作品部分ここから*/
.works_link {
	max-width:400px;
	max-height:400px;
	margin-bottom:30px;
/*	margin-left:10px;*/
}

/*PC・作品の画像*/

.img_area {
	width:90%;
	padding:30px 30px;
}

	
	
/*PC・作品の説明文*/
dd {
	font-size:1em;
}
	
#commentary_area {
		margin-top: 50px;
	}

.commentary_title {
	font-size:1.3em;
}

.commentary_p {
	font-size:1em;
}

#bou1-s{
	left:48%;
}


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


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