@charset "UTF-8";


.block_works01 {
	width: 285px;
	height: 285px;
	float: left;
	margin-right: 12px;
}
.block_works01 a {
	display: block;
	width: 285px;
	height: 285px;
	font-family: "Arial Black", Gadget, sans-serif;
	text-align: center;
	float: left;
	font-size: 12px;
	overflow: hidden;
	text-indent: 100%;
	white-space: nowrap;
	padding-right: 0;
	padding-left: 0;
	background-image: url(works/01b.png);
	background-repeat: repeat-x;
	background-position: left top;
}
/* link */
.block_works01 a:link    {
	color:#333;
	text-decoration:none;
	overflow: hidden;
	text-indent: 100%;
	white-space: nowrap;
}   /* リンク */
.block_works01 a:visited {color:#333; text-decoration:none;}   /* 訪問済みリンク */
.block_works01 a:hover   {
	color: #F00;
	background-image: url(works/01bon.png);
	background-position: 0px 0px;
	background-repeat: no-repeat;
	transition-property: all;
	transition: 0.5s linear;
}   /* ポイント時のリンク */
.block_works01 a:active  {
	overflow: hidden;
	background-image: url(works/01b.png);
}   /* アクティブなリンク　*/


.block_works02 {
	width: 285px;
	height: 285px;
	float: left;
	margin-right: 12px;
}
.block_works02 a {
	display: block;
	width: 285px;
	height: 285px;
	font-family: "Arial Black", Gadget, sans-serif;
	text-align: center;
	float: left;
	font-size: 12px;
	overflow: hidden;
	text-indent: 100%;
	white-space: nowrap;
	padding-right: 0;
	padding-left: 0;
	background-image: url(works/02b.png);
	background-position: 0px 0px;
	background-repeat: no-repeat;
}
/* link */
.block_works02 a:link    {
	color:#333;
	text-decoration:none;
	overflow: hidden;
	text-indent: 100%;
	white-space: nowrap;
}   /* リンク */
.block_works02 a:visited {color:#333; text-decoration:none;}   /* 訪問済みリンク */
.block_works02 a:hover   {
	color: #F00;
	background-image: url(works/02bon.png);
	background-position: 0px 0px;
	background-repeat: no-repeat;
	transition-property: all;
	transition: 0.5s linear;
}   /* ポイント時のリンク */
.block_works02 a:active  {
	color: #03F;
	overflow: hidden;
	background-image: url(works/02b.png);
	background-repeat: no-repeat;
}   /* アクティブなリンク　*/


.block_works03 {
	width: 285px;
	height: 285px;
		float: left;
}
.block_works03 a {
	display: block;
	width: 285px;
	height: 285px;
	float: left;
	font-size: 12px;
	overflow: hidden;
	text-indent: 100%;
	white-space: nowrap;
	padding-right: 0;
	padding-left: 0;
	background-image: url(works/03b.png);
	background-position: 0px 0px;
	background-repeat: no-repeat;
}
/* link */
.block_works03 a:link    {
	text-decoration:none;
	overflow: hidden;
	text-indent: 100%;
	white-space: nowrap;
}   /* リンク */
.block_works03 a:visited {color:#333; text-decoration:none;}   /* 訪問済みリンク */
.block_works03 a:hover   {
	background-image: url(works/03bon.png);
	background-position: 0px 0px;
	background-repeat: no-repeat;
	transition-property: all;
	transition: 0.5s linear;
}   /* ポイント時のリンク */
.block_works03 a:active  {
	overflow: hidden;
	background-image: url(works/03b.png);
	background-repeat: no-repeat;
}   /* アクティブなリンク　*/

.block_works04 {
	width: 285px;
	height: 285px;
		float: left;
		margin-right:12px;
		margin-top:12px;
}
.block_works04 a {
	display: block;
	width: 285px;
	height: 285px;
	float: left;
	font-size: 12px;
	overflow: hidden;
	text-indent: 100%;
	white-space: nowrap;
	padding-right: 0;
	padding-left: 0;
	background-image: url(works/04b.png);
	background-position: 0px 0px;
	background-repeat: no-repeat;
}
/* link */
.block_works04 a:link    {
	text-decoration:none;
	overflow: hidden;
	text-indent: 100%;
	white-space: nowrap;
}   /* リンク */
.block_works04 a:visited {color:#333; text-decoration:none;}   /* 訪問済みリンク */
.block_works04 a:hover   {
	background-image: url(works/04bon.png);
	background-position: 0px 0px;
	background-repeat: no-repeat;
	transition-property: all;
	transition: 0.5s linear;
}   /* ポイント時のリンク */
.block_works04 a:active  {
	overflow: hidden;
	background-image: url(works/04b.png);
	background-repeat: no-repeat;
}   /* アクティブなリンク　*/

.works_center {
	background-color: #540F0F;
	float: left;
	height: 285px;
	width: 285px;
	margin-top: 12px;
	margin-right: 12px;
	text-align: center;
	font-size: 0.6rem;
	color: #FFF;
}

.block_works0402 {
	width: 285px;
	height: 285px;
		float: left;
		margin-top:12px;
}
.block_works0402 a {
	display: block;
	width: 285px;
	height: 285px;
	float: left;
	font-size: 12px;
	overflow: hidden;
	text-indent: 100%;
	white-space: nowrap;
	padding-right: 0;
	padding-left: 0;
	background-image: url(works/0402b.png);
	background-position: 0px 0px;
	background-repeat: no-repeat;
}
/* link */
.block_works0402 a:link    {
	text-decoration:none;
	overflow: hidden;
	text-indent: 100%;
	white-space: nowrap;
}   /* リンク */
.block_works0402 a:visited {color:#333; text-decoration:none;}   /* 訪問済みリンク */
.block_works0402 a:hover   {
	background-image: url(works/0402bon.png);
	background-position: 0px 0px;
	background-repeat: no-repeat;
	transition-property: all;
	transition: 0.5s linear;
}   /* ポイント時のリンク */
.block_works0402 a:active  {
	overflow: hidden;
	background-image: url(works/0402b.png);
	background-repeat: no-repeat;
}   /* アクティブなリンク　*/

.block_works06 {
	width: 285px;
	height: 285px;
		float: left;
		margin-right:12px;
		margin-top:12px;
}
.block_works06 a {
	display: block;
	width: 285px;
	height: 285px;
	float: left;
	font-size: 12px;
	overflow: hidden;
	text-indent: 100%;
	white-space: nowrap;
	padding-right: 0;
	padding-left: 0;
	background-image: url(works/06b.png);
	background-position: 0px 0px;
	background-repeat: no-repeat;
}
/* link */
.block_works06 a:link    {
	text-decoration:none;
	overflow: hidden;
	text-indent: 100%;
	white-space: nowrap;
}   /* リンク */
.block_works06 a:visited {color:#333; text-decoration:none;}   /* 訪問済みリンク */
.block_works06 a:hover   {
	background-image: url(works/06bon.png);
	background-position: 0px 0px;
	background-repeat: no-repeat;
	transition-property: all;
	transition: 0.5s linear;
}   /* ポイント時のリンク */
.block_works06 a:active  {
	overflow: hidden;
	background-image: url(works/06b.png);
	background-repeat: no-repeat;
}   /* アクティブなリンク　*/


.block_works09 {
	width: 285px;
	height: 285px;
		float: left;
		margin-right:12px;
		margin-top:12px;
	
}
.block_works09 a {
	display: block;
	width: 285px;
	height: 285px;
	float: left;
	font-size: 12px;
	overflow: hidden;
	text-indent: 100%;
	white-space: nowrap;
	padding-right: 0;
	padding-left: 0;
	background-image: url(works/09b.png);
	background-position: 0px 0px;
	background-repeat: no-repeat;
}
/* link */
.block_works09 a:link    {
	text-decoration:none;
	overflow: hidden;
	text-indent: 100%;
	white-space: nowrap;
}   /* リンク */
.block_works09 a:visited {color:#333; text-decoration:none;}   /* 訪問済みリンク */
.block_works09 a:hover   {
	background-image: url(works/09bon.png);
	background-position: 0px 0px;
	background-repeat: no-repeat;
	transition-property: all;
	transition: 0.5s linear;
}   /* ポイント時のリンク */
.block_works09 a:active  {
	overflow: hidden;
	background-image: url(works/096b.png);
	background-repeat: no-repeat;
}   /* アクティブなリンク　*/

.block_worksmore {
	width: 285px;
	height: 285px;
		float: left;
		margin-top:12px;
}
.block_worksmore a {
	display: block;
	width: 285px;
	height: 285px;
	float: left;
	font-size: 12px;
	overflow: hidden;
	text-indent: 100%;
	white-space: nowrap;
	padding-right: 0;
	padding-left: 0;
	background-image: url(works/moreb.png);
	background-position: 0px 0px;
	background-repeat: no-repeat;
}
/* link */
.block_worksmore a:link    {
	text-decoration:none;
	overflow: hidden;
	text-indent: 100%;
	white-space: nowrap;
}   /* リンク */
.block_worksmore a:visited {color:#333; text-decoration:none;}   /* 訪問済みリンク */
.block_worksmore a:hover   {
	background-image: url(works/morebon.png);
	background-position: 0px 0px;
	background-repeat: no-repeat;
	transition-property: all;
	transition: 0.5s linear;
}   /* ポイント時のリンク */
.block_worksmore a:active  {
	overflow: hidden;
	background-image: url(works/moreb.png);
	background-repeat: no-repeat;
}   /* アクティブなリンク　*/

.works {
	width: 1000px;
	height: 900px
	margin-top: 20px;
	margin-bottom: 25px;
	height: 1000px;
}
.workskoma-con {
	height: 880px;
	width: 880px;
	margin-top: 35px;
	margin-left:60px;
	}
.modal-content {
	width: 900px;
	height: 675px;
	background: url(works/1koma.jpg);
	margin: 0;
	position: fixed;
	display: none;
	z-index: 2;
	background-color: #fff;
	text-align: center;
}


  
#modal-overlay {
	z-index: 1 ;
	display: none ;
	position: fixed ;
	top: 0 ;
	left: 0 ;
	width: 100% ;
	height: 120% ;
	background-color: rgba( 0,0,0, 0.75 ) ;
}

.modal-content-02 {
	width: 900px;
	height: 675px;
	background: url(works/2koma.jpg);
	margin: 0;
	position: fixed;
	display: none;
	z-index: 2;
	background-color: #fff;
	text-align: center;
}


  
#modal-overlay-02 {
	z-index: 1 ;
	display: none ;
	position: fixed ;
	top: 0 ;
	left: 0 ;
	width: 100% ;
	height: 120% ;
	background-color: rgba( 0,0,0, 0.75 ) ;
}

.modal-content-03 {
	width: 900px;
	height: 675px;
	background: url(works/3koma.jpg);
	margin: 0;
	position: fixed;
	display: none;
	z-index: 2;
	background-color: #fff;
	text-align: center;
}
#modal-overlay-03 {
	z-index: 1 ;
	display: none ;
	position: fixed ;
	top: 0 ;
	left: 0 ;
	width: 100% ;
	height: 120% ;
	background-color: rgba( 0,0,0, 0.75 ) ;
}

  
#modal-overlay-04 {
	z-index: 1 ;
	display: none ;
	position: fixed ;
	top: 0 ;
	left: 0 ;
	width: 100% ;
	height: 120% ;
	background-color: rgba( 0,0,0, 0.75 ) ;
}

.modal-content-04 {
	width: 900px;
	height: 675px;
	background: url(works/4koma.jpg);
	margin: 0;
	position: fixed;
	display: none;
	z-index: 2;
	background-color: #fff;
	text-align: center;
}

#modal-overlay-0402 {
	z-index: 1 ;
	display: none ;
	position: fixed ;
	top: 0 ;
	left: 0 ;
	width: 100% ;
	height: 120% ;
	background-color: rgba( 0,0,0, 0.75 ) ;
}

.modal-content-0402 {
	width: 900px;
	height: 675px;
	background: url(works/402koma.jpg);
	margin: 0;
	position: fixed;
	display: none;
	z-index: 2;
	background-color: #fff;
	text-align: center;
}

#modal-overlay-06 {
	z-index: 1 ;
	display: none ;
	position: fixed ;
	top: 0 ;
	left: 0 ;
	width: 100% ;
	height: 120% ;
	background-color: rgba( 0,0,0, 0.75 ) ;
}

.modal-content-06 {
	width: 900px;
	height: 675px;
	background: url(works/6koma.jpg);
	margin: 0;
	position: fixed;
	display: none;
	z-index: 2;
	background-color: #fff;
	text-align: center;
}
  
#modal-overlay-09 {
	z-index: 1 ;
	display: none ;
	position: fixed ;
	top: 0 ;
	left: 0 ;
	width: 100% ;
	height: 120% ;
	background-color: rgba( 0,0,0, 0.75 ) ;
}

.modal-content-09 {
	width: 900px;
	height: 675px;
	background: url(works/9koma.jpg);
	margin: 0;
	position: fixed;
	display: none;
	z-index: 2;
	background-color: #fff;
	text-align: center;
}

#modal-overlay-more {
	z-index: 1 ;
	display: none ;
	position: fixed ;
	top: 0 ;
	left: 0 ;
	width: 100% ;
	height: 120% ;
	background-color: rgba( 0,0,0, 0.75 ) ;
}

.modal-content-more {
	width: 900px;
	height: 675px;
	background: url(works/morekoma.jpg);
	margin: 0;
	position: fixed;
	display: none;
	z-index: 2;
	background-color: #fff;
	text-align: center;
}



.button-link {
	color: #00F;
	text-decoration: underline;
}
 
.button-link:hover {
	cursor: pointer;
	color: #F00;
}

.works_text {
	height: 50px;
	width: 900px;
	margin-top: 625px;
	color: #000;
	font-size: 1rem;
	background-color: #FFF;
	opacity: 0.7;
}
.modal-close {
	width: 700px;
	text-align: right;
}
.modal-close img {
	opacity: 0.5 ;
	margin-top:20px;
	margin-right:20px;
}
.modal-close {
	width: 900px;
	text-align: right;
}
.modal-close img {
	opacity: 0.5 ;
	margin-top:20px;
	margin-right:20px;
}
.modal-close a img:hover {
	opacity: 0.8 ;
}