@charset "utf-8";


/*「制作実績」ページの一覧用ブロック
---------------------------------------------------------------------------*/
/*ボックスの設定*/
#main section .pteiki {
	margin-bottom: 15px;	/*ボックス間のスペース*/
	position: relative;
	overflow: hidden;
	padding: 2.5%;	/*ボックス内の余白*/
	background: #fff;	/*背景色*/
	-webkit-box-shadow: 1px 1px 2px rgba(0,0,0,0.1);	/*影の設定。右へ、下へ、ぼかし幅。rgbaは色設定で0,0,0は黒。0.1が透明度。*/
	box-shadow: 1px 1px 2px rgba(0,0,0,0.1);			/*同上*/
}

/*ボックス内の写真設定*/
#main section .pteiki figure  {
	float: left;		/*画像を左へ回り込み*/
	width: 30%;			/*写真の幅*/
	height: auto;		/*写真の高さ*/
	margin-right: 4%;
}

/*ボックス内の写真設定*/
#main section .pteiki figure img {
	margin-right: 4%;
	
}



/*濃灰のやや大きめのボタン*/

#main section .pteiki .btn6{
  background : #666;
  color : #fff;
  text-decoration: none;
  padding: 5px 12px;
  font-weight: bold;
  margin-left: 18%;	
}

#main section .pteiki .btn6:hover{
  background : #000;
  color : #fff;
}


section.pteiki a:link{color: #000;}
section.pteiki a:visited{color: #000;}
section.pteiki a:hover{color: #440660;}

/*リンクテキストの設定*/

#main section .list a {
	text-decoration: none;
	overflow: hidden;
}

/*リンクテキストの段落タグ設定*/
#main section .list p {
	padding: 0px;
	margin-left: 34%;	/*左の写真とのバランスをとって設定*/
}

/*リンクテキストのh4タグ設定*/
#main section .list h4 {
	font-size: 17px;	/*文字サイズ*/
	margin-left: 34%;	/*左の写真とのバランスをとって設定*/
}
/*リンクテキストの矢印マーク設定*/
#main section .list a::before {
	content: "→";	/*「→」の文字を表示させる。機種依存文字は使わないように。*/
	background: #e6e6e6;	/*背景色*/
	color: #999;			/*文字色*/
	font-size: 20px;		/*文字サイズ*/
	line-height: 1;
	width: 65px;			/*幅。下の15pxと合計した数字がline-height(80px)になるようにする。*/
	padding-left: 15px;		/*左側へのボックス内余白。上の65pxと合計した数字がline-height(80px)になるようにする。*/
	line-height: 80px;		/*行間。上の２行の合計値と合うように。*/
	position: absolute;
	right: -40px;	/*ボックスの右から-40pxの場所に配置*/
	top: 32%;		/*ボックスの上から32%の場所に配置*/
	border-radius: 100px;	/*角丸のサイズ。ひとまず大きくしておけばいい。この行を削除すれば四角になる。*/
        opacity: 0.6;
}


/*「制作実績」ページの一覧用ブロック
---------------------------------------------------------------------------*/
/*ボックス内のh4タグ設定*/
#main section .list h4 {
	color: #440660;		/*文字色*/
}
/*マウスオン時*/
#main section .list a:hover::before {
	background: #440660;	/*背景色*/
	color: #fff;			/*文字色*/
}

/*画面幅650px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:650px){


/*全セミナーボタン*/

/*濃灰のやや大きめのボタン*/

#main section .pteiki .btn6{
  width:auto;
	max-width: auto;
  background : #666;
  color : #fff;
  text-decoration: none;
  padding: 7px 15px;
  font-size: 80%;
  font-weight: bold;
  margin-left: 0;	

}

#main section .pteiki .btn6:hover{
  background : #000;
  color : #fff;
}



}/*@media650の閉じタグ*/

/*画面幅480px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:480px){


/*「制作実績」ページの一覧用ブロック
---------------------------------------------------------------------------*/

/*ボックス内の段落タグ設定*/
#main section .list p {
	margin-left: 0;
}
/*ボックス内の写真設定*/
#main section .pteiki figure  {
	width:100%;
	max-width: 100%;
	height: auto;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	margin-bottom: 25px;
}
	
/*ボックス内の写真設定*/
#main section .pteiki figure img {
	width:100%;
	max-width: 100%;
	height: auto;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
}	
	
	
/*ボックス内のh4タグ設定*/
#main section .pteiki .list h4 {
	margin-left: 0;
}

#main section .pteiki .list h5 {
	margin-top: 10px;
}


/*濃灰のやや大きめのボタン*/

#main section .pteiki .btn6{
  width:100%;
  max-width: 100%;
  background : #666;
  color : #fff;
  font-size: 100%;
  text-decoration: none;
  padding: 7px 15px;
  font-weight: bold;
  margin-left: 0;	

}

#main section .pteiki .btn6:hover{
  background : #000;
  color : #fff;
}
	
	.mb35{margin-bottom: 10px;}
	
}/*@media480の閉じタグ*/