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

.pages{
	display:none;
	font-family: "source-han-sans-japanese",sans-serif;
}

#ct-op{
}
	#ttlop{
		display:block;
		width:205px;
		height:205px;
		position:absolute;
	}

	@-webkit-keyframes opTtlStart{
		0%{
			-webkit-transform-origin: center;
			-webkit-transform: rotate3d(0, 0, 1, -200deg) scale3d(1.5, 1.5, 1.5);
			opacity: 0;
		}
	
		100%{
			-webkit-transform-origin: center;
			-webkit-transform: none;
			opacity: 0.9;
		}
	}
	@keyframes opTtlStart{
		0%{
			transform-origin: center;
			transform: rotate3d(0, 0, 1, -200deg) scale3d(1.5, 1.5, 1.5);
			opacity: 0;
		}
	
		100%{
			transform-origin: center;
			transform: none;
			opacity: 0.9;
		}
	}
	.opttlstart{
		-webkit-animation-name: opTtlStart;
		-webkit-animation-duration: 1.2s;
		-webkit-animation-fill-mode: both;
		animation-name: opTtlStart;
		animation-duration: 1.2s;
		animation-fill-mode: both;
	}

	@-webkit-keyframes opTtlOver{
		0%{
			-webkit-transform-origin: center;
			-webkit-transform: none;
			opacity: 0.9;
		}
		100%{
			-webkit-transform-origin: center;
			-webkit-transform: scale3d(1.2, 1.2, 1.2);
			opacity: 0.7;
		}
	}
	@keyframes opTtlOver{
		0%{
			transform-origin: center;
			transform: none;
			opacity: 0.9;
		}
		100%{
			transform-origin: center;
			transform: scale3d(1.2, 1.2, 1.2);
			opacity: 0.7;
		}
	}
	.opttlover{
		-webkit-animation-name: opTtlOver;
		-webkit-animation-duration: 0.3s;
		-webkit-animation-fill-mode: both;
		animation-name: opTtlOver;
		animation-duration: 0.3s;
		animation-fill-mode: both;
	}

	@-webkit-keyframes opTtlOut{
		0%{
			-webkit-transform-origin: center;
			-webkit-transform: scale3d(1.2, 1.2, 1.2);
			opacity: 0.7;
		}
		100%{
			-webkit-transform-origin: center;
			-webkit-transform: none;
			opacity: 0.9;
		}
	}
	@keyframes opTtlOut{
		0%{
			transform-origin: center;
			transform: scale3d(1.2, 1.2, 1.2);
			opacity: 0.7;
		}
		100%{
			transform-origin: center;
			transform: none;
			opacity: 0.9;
		}
	}
	.opttlout{
		-webkit-animation-name: opTtlOut;
		-webkit-animation-duration: 0.3s;
		-webkit-animation-fill-mode: both;
		animation-name: opTtlOut;
		animation-duration: 0.3s;
		animation-fill-mode: both;
	}


#ct-portfolio,
#ct-contact,
#ct-about{
}
	#ct-portfolio h2,
	#ct-contact h2,
	#ct-about h2 span{
		display:block;
		overflow:hidden;
		text-align:left;
		text-indent:-9999px;
	}
	#ct-contact h2,
	#ct-portfolio h2{
		margin:18px 0 0 30px;
		padding:0;
	}
	#ct-about h2{
		margin:0;
		padding:0;
		position:relative;
	}

.ptt-portfolio{
	background:url(../images/bg_hth_portfolio.png) left top no-repeat;
}
.ptt-contact{
	background:url(../images/bg_hth_contact.png) left top no-repeat;
}
.ptt-about{
	background:url(../images/bg_hth_about.png) left top no-repeat;
}


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

#deco-about1{
	display:block;
	width:100%;
	height:100%;
	position:absolute;
	z-index:2;
	top:0;
}

	#ct-about em,
	#ct-about aside{
		display:block;
	}

	#ct-about h3{
		margin:44px 0 24px;
		padding:0 0 0 14px;
		font-size:0.9em;
	}
		#ct-about h3 span{
			background:#336699 url(../images/bg_cap.png) repeat;
			padding:5px 12px;
			border-radius:12px;
		}

	#ct-about ul,
	#ct-about li{
		display:block;
		list-style-type:none;
		list-style-position:outside;
		margin:0;
		padding:0;
	}
	#ct-about ul{
		zoom:1;
		margin:0 0 0 14px;
	}
	#ct-about ul:after{
		content:"";
		display:block;
		clear:both;
	}
		#ct-about li{
			float:left;
			width:36px;
			height:36px;
			margin:3px 0 0;
		}

		#ct-about strong{
			display:block;
			width:142px;
			height:64px;
			margin:0 0 0 14px;
			text-indent:-9999px;
			overflow:hidden;
			background:url(../images/txt_name_murata.png) left top no-repeat;
			float:left;
		}
@media screen and (max-width: 414px){
		#ct-about strong{
			float:none;
			height:80px;
		}
}
		#ct-about aside .txtDesc{
			display:block;
			margin:40px 0 0;
			background:rgba(255,255,255, 0.65);
			padding:10px;
			line-height:1.8;
			font-size:90%;
			zoom:1;
		}
		#ct-about aside .txtDesc:after{
			content:"";
			display:block;
			clear:both;
		}
			#ct-about aside .txtDesc p{
				margin:0;
				padding:0 0 15px;
			}
			#ct-about aside .txtDesc dl,
			#ct-about aside .txtDesc dt,
			#ct-about aside .txtDesc dd{
				display:block;
				margin:0;
				padding:0;
			}
			#ct-about aside .txtDesc dl{
				zoom:1;
			}
			#ct-about aside .txtDesc dl:after{
				content:"";
				clear:both;
			}
			#ct-about aside .txtDesc dt{
				clear:left;
				float:left;
				width:15%;
			}
			#ct-about aside .txtDesc dd{
				margin-left:15%;
			}


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

	#ct-portfolio{
		margin-bottom:50px;
	}
		#ct-portfolio .column{
			width:100%;
			margin:16px 0 46px;
		}
		#ct-portfolio .frmdoc{
			zoom:1;
		}
		#ct-portfolio .frmdoc:after{
			content:"";
			display:block;
			clear:both;
		}
			#ct-portfolio .frmdoc #pfPageNav{
				position:absolute;
				bottom:0;
			}
				#ct-portfolio .frmdoc #pfPageNav a{
					display:none;
				}
			#loadInfoPf{
				position: fixed;
				width: 100%;
				bottom:50px;
				background:rgba(255, 255, 255, 0.7);
				color:#333333;
				font-size:0.7em;
				font-style:normal;
				text-align:center;
				padding:12px 0;
				display:none;
			}

			#ct-portfolio .frmdoc .grid-sizer{
				width:20%;
			}
			#ct-portfolio .frmdoc .img{
				width:20%;
				float: left;
				height:120px;
				overflow:hidden;
				position:relative;
				margin:5px 0;
				padding:0;
				border-radius:10px;
			}
@media screen and (max-width: 1100px){
			#ct-portfolio .frmdoc .grid-sizer{
				width:25%;
			}
			#ct-portfolio .frmdoc .img{
				width:25%;
			}
}
@media screen and (max-width: 700px){
			#ct-portfolio .frmdoc .grid-sizer{
				width:33.3333%;
			}
			#ct-portfolio .frmdoc .img{
				width:33.3333%;
			}
}
@media screen and (max-width: 414px){
			#ct-portfolio .frmdoc .grid-sizer{
				width:50%;
			}
			#ct-portfolio .frmdoc .img{
				width:50%;
			}
}
				#ct-portfolio .frmdoc .img a{
					display: block;
					max-width: 100%;
					height:100%;
					margin:9px;
				}
					#ct-portfolio .frmdoc .img a img{
						display:block;
						height:0;
						overflow:hidden;
					}
				#ct-portfolio .frmdoc .img figcaption{
					position:absolute;
					top:0;
					left:0;
					z-index:2;
					background:rgba(255,255,255,0.3) url(../images/bg_cap.png) left top repeat;
					padding:6px;
					border-radius:0 0 12px 0;
				}

        .pswp__zoom-wrap video{
          display:block;
          margin:0 auto;
        }


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

	#ct-contact{
	}
		#ct-contact h3{
			margin:44px 0 0;
			padding:0 0 0 14px;
			font-size:0.9em;
		}
			#ct-contact h3 span{
				background:#eeee66 url(../images/bg_cap.png) repeat;
				padding:5px 12px;
				border-radius:12px;
			}

		#ct-contact p{
			padding:0 0 0 14px;
			font-size:0.82em;
		}

		#ct-contact ul{
			display:block;
			margin:12px;
			padding:9px 0 14px;
			background-color:rgba(255,255,255,0.65);
			border:1px dotted #ff6600;
			border-radius:8px;
			line-height:1.5;
			font-size:90%;
		}
			#ct-contact ul li{
				display:list-item;
				list-style-type:circle;
				list-style-position:outside;
				margin:5px 14px 3px 30px;
				padding:0;
			}

		@-webkit-keyframes btnover{
			0%{
				background:#eeee66 url(../images/bg_cap.png) repeat;
			}
			100%{
				background:#ffff99 url(../images/bg_cap.png) repeat;
			}
		}
		@keyframes btnover{
			0%{
				background:#eeee66 url(../images/bg_cap.png) repeat;
			}
			100%{
				background:#ffff99 url(../images/bg_cap.png) repeat;
			}
		}
		@-webkit-keyframes btnout{
			0%{
				background:#ffff99 url(../images/bg_cap.png) repeat;
			}
			100%{
				background:#eeee66 url(../images/bg_cap.png) repeat;
			}
		}
		@keyframes btnout{
			0%{
				background:#ffff99 url(../images/bg_cap.png) repeat;
			}
			100%{
				background:#eeee66 url(../images/bg_cap.png) repeat;
			}
		}

		#ct-contact #btnContact{
			margin:55px auto 5px;
			width:320px;
			text-align:center;
		}

			#ct-contact #btnContact a,
			#ct-contact #btnContact a:hover{
				-webkit-animation-duration: 0.3s;
				animation-duration: 0.3s;
				-webkit-animation-fill-mode: both;
				animation-fill-mode: both;
			}
			#ct-contact #btnContact a{
				display:block;
				font-size:1.15em;
				padding:12px;
				color:#000000;
				border-radius:5px;
				text-align:center;
				text-decoration:none;
				background:#eeee66 url(../images/bg_cap.png) repeat;
				-webkit-animation-name: btnout;
				animation-name: btnout;
			}
			#ct-contact #btnContact a:hover{
				-webkit-animation-name: btnover;
				animation-name: btnover;
			}