@charset "utf-8";

html{
	height: 100%;
}

body {
	background:#000000;
	width:100%;
	height:100%;
}

#container{
	position:relative;
	height:1068px;
	min-width:1000px;
	height: 841px;
	overflow:hidden;
	text-align:center;
	background-image:url(../img/common/bg_pattern.jpg);
	background-repeat:repeat;
	background-size: 26px 26px;
	background-position: top center;
	background-color:#ffffff;
	padding:10px 10px 190px;
}

/*------------------
contents
------------------*/

.pagetitle{
	position:absolute;	
	left: 32px;
	top: 45px;
}

#contents{
	position:relative;
	width: 1000px;
	margin: 0 auto;

}

.web{
	position:absolute;
	top:130px;
	left:100px;	
}

.paper{
	position:absolute;
	top:130px;
	left:388px;	
}

.banner{
	position:absolute;
	top:130px;
	left:676px;	
}

.illust{
	position:absolute;
	top:370px;
	left:100px;	
}

.other{
	position:absolute;
	top:370px;
	left:388px;	
}

/*------------------
web
------------------*/

#container_web{
	position:relative;
	height:1068px;
	min-width:1000px;
	height: 1800px;
	overflow:hidden;
	text-align:center;
	background-image:url(../img/common/bg_pattern.jpg);
	background-repeat:repeat;
	background-size: 26px 26px;
	background-position: top center;
	background-color:#ffffff;
	padding:10px 10px 190px;
}

#contents_web{
	position:relative;
	width: 1000px;
	margin: 0 auto;
	height:4000px;
}

#thumb_area{
	position:absolute;
	top:130px;
	margin:0 30px;
	width:940px;

}

.webworks{
	position: absolute;
	overflow: hidden;
	width: 291px;
	height:191px;
}

.webworks:nth-child(1){
	top:0;
	left:0;
}

.webworks:nth-child(2){
	top:0;
	left: 314px;
}

.webworks:nth-child(3){
	top:0px;
	right:0;
	
}

.webworks:nth-child(4){
	top:240px;
	left:0;
}

.webworks:nth-child(5){
	top:240px;
	left: 314px;
}

.webworks:nth-child(6){
	top:240px;
	right:0;
	
}

.webworks:nth-child(7){
	top:480px;
	left:0;
}

.webworks:nth-child(8){
	top:480px;
	left: 314px;
}

.webworks:nth-child(9){
	top:480px;
	right:0;
	
}

.webworks:nth-child(10){
	top:720px;
	left:0;
}

.webworks:nth-child(11){
	top:720px;
	left:314px;
	
}

.webworks:nth-child(12){
	top:720px;
	right: 0px;
}

.webworks:nth-child(13){
	top:960px;
	left:0;
	
}

.webworks:nth-child(14){
	top:960px;
	left: 314px;
}

.webworks:nth-child(15){
	top:960px;
	right:0;
	
}

.webworks:nth-child(16){
	top: 1200px;
	left:0;
	
}

.pic{
	width:291px;
	height:191px;
	overflow: hidden;
	background-color:#000;
}

.pic:after{
	content: url(../img/works/web/plus.png);
    position: relative;
	z-index:100;
	margin-left:230px;
    bottom: 50px;
	cursor:pointer;
}

.transform_pic {
	-webkit-transform: scale(1);
	transform: scale(1);
	-webkit-transition: all .3s ease-in-out;
	transition: all .3s ease-in-out;
}

.webworks:hover .transform_pic {
	-webkit-transform: scale(1.2);
	transform: scale(1.2);
	opacity:0.6;
	cursor:pointer;
}

/*--キャプション--*/
.web_caption{
	position: absolute;
	top: 0;
	left: 0;
	z-index: 0;
	width: 100%;
	-webkit-transition: .3s;
	transition: .3s;
	opacity: 0;
}

.web_caption h3 {
	position:absolute;
	right:0;
	left:0;
	margin:0 auto;
	top:70px;
    color: #fff;
    font-size: 15px;
    text-align: center;
    font-family: 'Open Sans', sans-serif;
    font-weight: 600;
}

.web_caption p {
	position:absolute;
	right:0;
	left:0;
	margin:0 auto;
	top:130px;
    color: #fff;
    text-align: center;
    font-family: 'Open Sans', sans-serif;
    font-weight: 400;
}

.webworks:hover .web_caption{
	cursor:pointer;
	opacity: 1;
}


/*--------------------------
popup
--------------------------*/


#column{
	position:absolute;
	left:50%;
	margin-left:-470px;
	top:82px;
}
#wrapper{
	width:100%;
	min-width:1100px;
	height:880px;
	background:url(../img/character/bg.jpg) no-repeat center top;
	background-size:cover;
	position:relative;
	overflow:hidden;
}
#wrapper2{
	width:100%;
	min-width:1100px;
	height:1900px;
	background:url(../img/character/bg.jpg) no-repeat center top #010c1f;
	background-size:100% auto;
	position:relative;
	overflow:hidden;
}
#bgjl{
	position:absolute;
	left:50%;
	top:0;
	margin-left:-377px;
}

#ch_wrap{
	position:absolute;
	width:1280px;
	margin-left:-640px;
	top:0;
	left:50%;
	height:800px;
	overflow:hidden;
}
#container{
	position:relative;
	width:100%;
	/*background:#000;*/
	min-height:880px;
	z-index:901;
}

#character{
	position:absolute;
	left:577px;
	top:93px;
}
#ch1,#hit1{
	position:absolute;
	left:145px;
	top:150px;
}
#ch2,#hit2{
	position:absolute;
	left:344px;
	top:150px;
}

#over_name{
	position:absolute;
	left:50%;
	margin-left: -332px;
	width:664px;
	top:305px;
	
}
#over_name div{
	display:block;
	text-align:center;
}
.over_ch{
	position:absolute;
	left:0;
	top:0;
	opacity:0;
}
.ch_logo{
	position:absolute;
	left:0;
	top:0;
	opacity:0;
	width:100%;
}
.hit_area{
	opacity:1;
	cursor:pointer;
}

/*----背景fade----*/

#ch_popup{
	position: fixed;
	width:100%;
	min-width:1000px;
	height: 100%;
	left:0;
	top:0;
	background:rgba(255,255,255,0.9);
	opacity:0;
	visibility:hidden;
	z-index:900;
	overflow: auto;

}

/*----背景ベース----*/

#ch_area{
	position:relative;
	left:0;
	right:0;
	top: 8%;
	margin:0 auto;
	width:960px;
	height:900px;
	background:#FFF;
	border:2px solid #8f8f8f;
    border-radius: 10px;
	margin-bottom: 10%;
}

#ch_load{
	position:absolute;
	top:70px;
	left:0;
	right:0;
	margin:0 auto;
	width:800px;
	height: 760px;
	opacity:0;
}

#ch_close{
    position: absolute;
	right: -115px;
	top: -110px;
    cursor: pointer;
	z-index:1;
}

#ch_img{
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
}

.ch_bg{
	position:absolute;
	left:0;
	top:0;
	width:1280px;
	height:770px;
	background:#000;
}

/*---リンクエリア---*/
.ch_set{
	position:absolute;
	left:0;
	top:0;
}

#ch_img img{
	display:none;
}

.ch_over{
	position:absolute;
	left:0;
	top:0;
	visiblity:hidden;
}


#ch_logo{
    position: absolute;
    left: 180px;
    top:50px;
	z-index:1;
}
.ch_change{
	cursor:pointer;
}

.dl1{
    position: absolute;
    width: 68px;
    height: 50px;
    left: 20px;
    top: 36px;
    background: rgba(255,255,255,0);
	cursor:pointer;
}
.dl2{
    position: absolute;
    width: 68px;
    height: 50px;
    left: 97px;
    top: 36px;
    background: rgba(255,255,255,0);
    cursor: pointer;
}
#ch_name{
	position:absolute;
	left:0px;
	top:0px;
}
#ch_prof{
	position: absolute;
	left: 0px;
	top: 380px;
}


/*---リンクボタン---*/
.link_button{
	width:800px;	
	height:60px;

}

.link_button img{
	float:left;
}

.link_button img:nth-child(1){
	margin-left:2px;	
	
}

/*---テキストエリア---*/
.ch_text{
	position:absolute;
	left:0;
	top: 470px;
	width: 800px;
	height: 289px;
	overflow:hidden;
	font-size:14px;
	color:#8f8f8f;
	line-height:22px;
	z-index:1;
}

.left_txt{
	position:absolute;
	left:0;
	width:270px;
	height: 289px;
	
}

.right_txt{
	position:absolute;
	right:0;
	width:500px;
	height: 289px;
}

.sub_title{
	width:270px;	
	margin:5px 0;

}

.border_deco{
	width:270px;
	height:5px;
	background:url(../img/works/web/popup/lefttxt_border.jpg) no-repeat top left;	
	background-size:contain;
	
}

.season{
	position:absolute;	
	top:0px;
}

.time{
	position:absolute;	
	top: 72px;
		
}

.part{
	position:absolute;	
	top: 141px;
		
}

.client{
	position:absolute;	
	top: 210px;
	
}

.target{
	opacity:1;
	z-index:1;
}

.change_w{
	z-index:1;
}


/*------------------
illust
------------------*/

#container_illust{
	position:relative;
	height:1068px;
	min-width:1000px;
	height: 780px;
	overflow:hidden;
	text-align:center;
	background-image:url(../img/common/bg_pattern.jpg);
	background-repeat:repeat;
	background-size: 26px 26px;
	background-position: top center;
	background-color:#ffffff;
	padding:10px 10px 190px;
}

#contents_illust{
	position:relative;
	width: 1000px;
	margin: 0 auto;
	height:780px;
}

.illustworks{
	position: absolute;
	overflow: hidden;
	width: 150px;
	height: 150px;
}

.illustworks:nth-child(1){
	top:0;
	left:0;
}

.illustworks:nth-child(2){
	top:0;
	left: 197px;
}

.illustworks:nth-child(3){
	top:0px;
	left: 394px;
	
}

.illustworks:nth-child(4){
	top:0;
	left: 593px;
}

.illustworks:nth-child(5){
	top:0;
	right: 0px;
}

.illustworks:nth-child(6){
	top:200px;
	left:0;
}

.illustworks:nth-child(7){
	top:200px;
	left: 197px;
}

.illustworks:nth-child(8){
	top:200px;
	left: 394px;
	
}


.transform_pic {
	-webkit-transform: scale(1);
	transform: scale(1);
	-webkit-transition: all .3s ease-in-out;
	transition: all .3s ease-in-out;
}

.illustworks:hover .transform_pic {
	-webkit-transform: scale(1.2);
	transform: scale(1.2);
	opacity:0.6;
	cursor:pointer;
}




/*------------------
paper
------------------*/

#container_paper{
	position:relative;
	height:1068px;
	min-width:1000px;
	height: 780px;
	overflow:hidden;
	text-align:center;
	background-image:url(../img/common/bg_pattern.jpg);
	background-repeat:repeat;
	background-size: 26px 26px;
	background-position: top center;
	background-color:#ffffff;
	padding:10px 10px 190px;
}

#contents_paper{
	position:relative;
	width: 1000px;
	margin: 0 auto;
	height:780px;
}

.paperworks{
	position: absolute;
	overflow: hidden;
	width: 150px;
	height: 150px;
}

.paperworks:nth-child(1){
	top:0;
	left:0;
}

.paperworks:nth-child(2){
	top:0;
	left: 197px;
}

.paperworks:nth-child(3){
	top:0px;
	left: 394px;
	
}

.paperworks:nth-child(4){
	top:0;
	left: 593px;
}

.paperworks:nth-child(5){
	top:0;
	right: 0px;
}


.transform_pic {
	-webkit-transform: scale(1);
	transform: scale(1);
	-webkit-transition: all .3s ease-in-out;
	transition: all .3s ease-in-out;
}

.paperworks:hover .transform_pic {
	-webkit-transform: scale(1.2);
	transform: scale(1.2);
	opacity:0.6;
	cursor:pointer;
}


/*------------------
banner
------------------*/

#container_banner{
	position:relative;
	height: 1038px;
	min-width:1000px;
	overflow:hidden;
	text-align:center;
	background-image:url(../img/common/bg_pattern.jpg);
	background-repeat:repeat;
	background-size: 26px 26px;
	background-position: top center;
	background-color:#ffffff;
	padding:10px 10px 190px;
}

#contents_banner{
	position:relative;
	width: 1000px;
	margin: 0 auto;
	height:780px;
}

.bannerworks{
	position: absolute;
	overflow: hidden;
	width: 150px;
	height: 150px;
}



/*----------------*/
/*unlimitedバナー制作一覧
/*----------------*/

.unlimited_bannerworks{
	position: relative;
	width:291px;
	height:191px;
	overflow: hidden;
	background-color:#000;
}

.unlimited_bannerworks:nth-child(1){
	position: absolute;
	top:0;
	left:0;
}

.unlimited_bannerworks:nth-child(2){
	position: absolute;
	top:0;
	left: 326px;
}

.unlimited_bannerworks:nth-child(3){
	position: absolute;
	top:0;
	right:0;
}

.unlimited_bannerworks:nth-child(4){
	position: absolute;
	top: 221px;
	left:0;
}

.unlimited_bannerworks:nth-child(5){
	position: absolute;
	top: 221px;
	left: 326px;
}

.unlimited_bannerworks:nth-child(6){
	position: absolute;
	top: 221px;
	right:0;
}

.unlimited_bannerworks:nth-child(7){
	position: absolute;
	top: 442px;
	left:0;
}

.unlimited_bannerworks:nth-child(8){
	position: absolute;
	top: 442px;
	left: 326px;
}


.unlimited_bannerworks:hover .transform_pic {
	-webkit-transform: scale(1.2);
	transform: scale(1.2);
	opacity:0.6;
	cursor:pointer;
}

/*--キャプション--*/
.unlimited_banner_caption{
	position: absolute;
	top: 0;
	left: 0;
	z-index: 0;
	width:100%;
	-webkit-transition: .3s;
	transition: .3s;
	opacity: 0;
}

.unlimited_banner_caption h3 {
	position:absolute;
	right:0;
	left:0;
	margin:0 auto;
	top:70px;
    color: #fff;
    font-size: 15px;
    text-align: center;
    font-family: 'Open Sans', sans-serif;
    font-weight: 600;
}

.unlimited_banner_caption p {
	position:absolute;
	right:0;
	left:0;
	margin:0 auto;
	top:130px;
    color: #fff;
    text-align: center;
    font-family: 'Open Sans', sans-serif;
    font-weight: 400;
}

.unlimited_bannerworks:hover .unlimited_banner_caption{
	cursor:pointer;
	opacity: 1;
}

/*----------------*/


.bannerworks:nth-child(9){
	top:900px;
	left:0;
}

.bannerworks:nth-child(10){
	top:900px;
	left: 197px;
}

.bannerworks:nth-child(11){
	top:900px;
	left: 394px;
}

.bannerworks:nth-child(12){
	top:900px;
	left: 593px;
}

.bannerworks:nth-child(13){
	top:900px;
	right: 0px;
}



.bannerworks:hover .transform_pic {
	-webkit-transform: scale(1.2);
	transform: scale(1.2);
	opacity:0.6;
	cursor:pointer;
}




/*------------------
other
------------------*/

#container_other{
	position:relative;
	height:1068px;
	min-width:1000px;
	height: 780px;
	overflow:hidden;
	text-align:center;
	background-image:url(../img/common/bg_pattern.jpg);
	background-repeat:repeat;
	background-size: 26px 26px;
	background-position: top center;
	background-color:#ffffff;
	padding:10px 10px 190px;
}

#contents_other{
	position:relative;
	width: 1000px;
	margin: 0 auto;
	height:780px;
}

.otherworks{
	position: absolute;
	overflow: hidden;
	width: 150px;
	height: 150px;
}

.otherworks:nth-child(1){
	top:0;
	left:0;
}

.otherworks:nth-child(2){
	top:0;
	left: 197px;
}

.otherworks:nth-child(3){
	top:0px;
	left: 394px;
	
}

.otherworks:nth-child(4){
	top:0;
	left: 593px;
}

.otherworks:nth-child(5){
	top:0;
	right: 0px;
}


.transform_pic {
	-webkit-transform: scale(1);
	transform: scale(1);
	-webkit-transition: all .3s ease-in-out;
	transition: all .3s ease-in-out;
}

.otherworks:hover .transform_pic {
	-webkit-transform: scale(1.2);
	transform: scale(1.2);
	opacity:0.6;
	cursor:pointer;
}