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

/**ロゴアニメーション切り替え**/

body.fix  {
  overflow: hidden;
}

#block_2{
	visibility: hidden;
	opacity: 0;
	-webkit-transition:opacity 0.3s ease-in-out;
	transition:opacity 0.3s ease-in-out;
}
.notransition{
	-webkit-transition:opacity 0.3s ease-in-out;
	transition:opacity 0.3s ease-in-out;

}
/* #block_3{
	display: none;
} */
#main.show #block_2,
#main.show #block_3{
visibility: visible;
opacity: 1;
}

/* 
#main.show #block_3{
	display: block;
} */
body.ie8 #canvas{
	display: none;
}	

body.ie8 .logo_area img{
	display: block!important;
}

/***********/
#menu_contact p{
	cursor:pointer;
}

/*********/
#main{
	padding-bottom:25px;
}


#contact_block{
	padding-top:0!important;
	background-color:#FFF;
	padding-bottom: 75px!important;
}


#main_contents .webfont,
#contact_main_contents{
	margin:0;
	letter-spacing: 2px;
}

/*#main .contents_block,*/
#contact_block .contents_block{
	padding-top: 22px;
}

#main .webfont{
	color:white;
}
#main .contents_block{
padding-top: 0;
}
/*
block_1
*******************************/

#block_1{
	width:880px;
	margin:0 auto;
	/*padding-bottom:160px;*/
}

.logo_area{
	width:237px;height:126px;
	margin: 0 auto;
	/*padding-top:115px;
	padding-top:60px;*/
	position: relative;
}
.logo_area img{
	display: none;
}
#canvas{
	margin-top:-10px;
	margin-left: -30px;
}

/*
block_2
*******************************/

#block_2{
	padding-bottom: 70px;
}

#thumbnail_block{
	max-width: 880px;
}



#thumbnail_block .border{
	top: 0;
	width: 100%;
	height: 100%;
	position:absolute;
	box-sizing: border-box;
	-webkit-box-sizing : border-box ;
	box-sizing : border-box ;
	border:#8ce6cb solid 0px;
	opacity:0;
	-webkit-transition: opacity 0.2s ease-in;
	transition:opacity 0.2s ease-in;
	/* -webkit-transform:translate3d(0,0,0); */
	max-width:219px;/*サイズ調整*/
}
#thumbnail_block  #no11 .border{
	max-width:439px;
}
#thumbnail_block  #no11,
#thumbnail_block  #no11 img{
	width:439px;
}

#thumbnail_block>div:hover .border{
	opacity:1;
	border: #8ce6cb solid 3px;
}

#thumbnail_block>div.work_icon{
	float: left;
	position: relative;
	margin-left: 1px;
	margin-bottom: 1px;
	background-color:#eefffc;
}
.inner_bottom:hover a,
#thumbnail_block>div:hover img{
	opacity:1;
	-webkit-animation:menu_hover 0.8s cubic-bezier(0.590, 0.220, 0.305, 1.000);
	animation:menu_hover 0.5s cubic-bezier(0.590, 0.220, 0.305, 1.000);
}
.inner_bottom a{display: block;}

.new_block.no1{
	margin-left:0!important;
}

.new_block.no6{
	margin-left:0!important;
	clear:both;
}

/*
block_3
*******************************/

.movie_area{
	max-width: 880px;
}

.movie_area>div.movie_block {
	margin-right: 15px;
	margin-bottom:30px;
	position: relative;
	float: left;
	background-color:#3f8494;
	width: 432px;
	height: 243px;
}
.movie_area>div.movie_block iframe{
	background-color: #000;
}

.movie_block.no2,
.movie_block.no4{
	margin-right:0!important;
}
#block_3 h1{
	/* margin-bottom: 33px */
}

/*
contact
*******************************/

#contact_area{
	width:880px;
	margin:0 auto;
	padding-bottom:20px;
	position:relative;
}

#contact_area h1{
	margin-top: 23px;
	margin-bottom: 10px;
}

#contact_area h1 .webfont{
	/* margin-bottom:8px; */
}

.webfont{
	font-size:14px;
}

h1{
	margin-top: 23px;
	/* margin-bottom: 10px; */
	margin-bottom: 30px;
}

h1 .webfont{
	font-size:22px;
}

#name,
#e_mail,
#message{
	padding-left:0.3em;
}

.title{
	margin-bottom: -14px;
}

.title .webfont{
	font-weight: 300;
}
#contact_area .title{
	margin-bottom:0;
}

input{
	width:520px;height:35px;
	border:1px solid #a9a9a9;
	margin-bottom:10px;
	font-family: 'Noto Sans Japanese', "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic",sans-serif;
	font-weight:200;
	font-size: 16px;
}

textarea{
	font-family: 'Noto Sans Japanese', "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic",sans-serif;
	font-weight:200;
	font-size: 16px;
	width:520px;height:185px;
	border:1px solid #a9a9a9;
	resize: vertical;
	overflow: auto;
}



button{
	width: 243px;height: 46px;
	left: 635px;top: auto;
	bottom: 25px;
	background-color: #c4004f;
	border: none;
	color: white;
	font-size:14px;
	cursor:pointer;
	position:absolute;
	-webkit-transition:all 0.3s cubic-bezier(0.590, 0.220, 0.305, 1.000);
}

button:hover{
	background-color:#810034;
	
}


/******************************
closeup_containerモーダル部分
background-color: #808080;
/*******************************/
#closeup_modal{
	background-image:url(../img/works/transparent.png);
	position:fixed;
	top:0;
	left:0;
	right: 0;
	bottom: 0;
	height:100%;
	width:100%;

}
#closeup_container{
	visibility: hidden;
	opacity: 0;
	overflow: hidden;
	margin:0;
	padding-top:1px;
	padding-bottom:1px;
	position:fixed;
	top:0;
	left:0;
	right: 0;
	bottom: 0;
	height:100%;
	width:100%;
	color:#fff;
	-webkit-transition: opacity 0.3s ease-in;
	-moz-transition: opacity 0.3s ease-in;
	transition: opacity 0.3s ease-in;

}
.ie8 #closeup_container .closeup_page{
	display: none;
	visibility: hidden;
}
.ie8 .on#closeup_container .closeup_page.on{
	display: block;
	visibility: visible;
}
#closeup_container .arrow{
	vertical-align: -0.2em;
	margin-right: 4px;
	width:1em;
	height:1em;
	display:inline-block;
	background-image:url(../img/member/arrow.png);
	background-repeat:no-repeat;
	background-position:left center;
}

#closeup_container.on{
	visibility: visible;
	opacity: 1;
}

#closeup_container a{
	color:#fff;
	font-size:20px;
	line-height: 30px;
}

section#closeup_container.on.hide,
#main .hide{
	opacity: 0;
}


#closeup_container .closeup_page{
	width: 680px;
	/*height: 400px;*/
	background-image:url(../img/works/black80.png);
	margin-left:auto;
	margin-right:auto;
	/* top:50%; */
	top:219px;
	/* margin-top: -200px; */
	position:absolute;
	left:0;
	right:0;
	box-sizing:border-box;
	padding:35px 25px 20px 25px;
	opacity: 0;
}
#closeup_container.win_mini .closeup_page{
	top:50%;
	margin-top:  -203px; 
}


#closeup_container.on .closeup_page.on{
	opacity: 1;
	z-index:5;
}

#closeup_container #page11.closeup_page{
	    width: 800px;
}

#closeup_container #page11.closeup_page .text_box .text1{
	text-indent: 0;
}

#closeup_container #page11.closeup_page .img_box,
#closeup_container #page11.closeup_page .img_box img{
	max-width: 440px;
	width: 100%;
}

#closeup_container .img_box{
	float: left;
	position: relative;
	margin-right: 20px;
	width: 236px;
	height: 236px;
}
#closeup_container .text_box p{
	margin:0;
	padding:0;
	list-style:none;

}
#closeup_container .text_box .text1{
	font-weight: 300;
	font-size:24px;
	line-height: 32px;
	margin-bottom: 10px;
	color:#fff;
/*	text-indent: -0.5em*/
}

#closeup_container .text_box .text2{
	font-size:11px;
	line-height: 15px;
	color:#fff;
}
#closeup_container .text_box .text3{
	font-weight: 300;
	font-size:24px;
	line-height: 32px;
	color:#fff;
/*	text-indent: -0.5em*/
}

#closeup_container .inner_top{
	margin-bottom: 85px;
}

#closeup_container .close{
	position:absolute;
	right: 24px;
	bottom: 20px;
	width: 34px;
	height: 34px;
	cursor:pointer;
}