/* CSS Document */

#gNav [href="#"]{
	pointer-events: auto;
	}

#pagePath{
	display: none;
	}

#hero{
	position: relative;
	padding-top: 0;
	}
	.done #hero>div+div{
		-webkit-animation: hero 1s ease-in 0.5s forwards;
		animation: hero 1s ease-in 0.5s forwards;
		}
	#hero p{}
		#hero p:first-child{
			 font-family: "Sawarabi Mincho";
			font-weight: 400;
			margin-bottom: 0.5em;
			line-height: 1em;
			}
	#hero>div+div{
		position: absolute;
		left: 0;
		bottom: 0;
		width: 100%;
		opacity: 0;
		overflow: hidden;
		}
	#hero dl{
		position: relative;
		padding: 2em 0;
		color: #fff;
		}
		#hero dl:before{
			content: "";
			position: absolute;
			top: 0;
			width: 100vw;
			height: 100%;
			margin-left: -2em;
			background: #ce5a4a;
			}
	#hero dt,
	#hero dd{
		position: relative;
		}
	#hero dt{
		font-family: "Sawarabi Mincho";
		}
	#hero dd{
		margin-top: 0.5em;
		line-height: 1.6em;
		}

#vegas{
	width: 80vw;
	}
	#vegas.thumbBox{
		padding-top: 66.66%;
		background-size: cover;
		}
		#vegas.thumbBox img{
			opacity: 0;
			}

#outline{}
	#outline header{
		margin-bottom: 0;
		}
	#outline h2{
		display: none;
		}
	#outline dl{
		display: -ms-flexbox;
		display: -webkit-flex;
		display: flex;
		-ms-flex-wrap: wrap;
		-webkit-flex-wrap: wrap;
		flex-wrap: wrap;
		margin-top: 1em;
		line-height: 1.4em;
		}
	#outline dl dt,
	#outline dl dd{
		padding: 0.8em;
		border-bottom: 1px solid #ccc;
		}
		#outline dl dt:nth-of-type(1),
		#outline dl dd:nth-of-type(1){
			border-top: 1px solid #ccc;
			}
	#outline dt{
		width: 10em;
		background: #f2f2f2;
		text-align: center;
		}
	#outline dd{
		width: calc(100% - 10em);
		background: #fff;
		border-left: 1px solid #ccc;
		}
		#outline dd p{
			margin-top: 0.5em;
			}

#works{
	overflow: hidden;
	}
	#works li a{
		display: block;
		border: 1px solid #e6e6e6;
		}
		#works li a:hover,
		#works li :active{
			border-color: #425377;
			}
	#works .thumbBox{
		padding-top: 66.66%;
		background-size: cover;
		}
		#works .thumbBox img{
			object-fit: cover;
			}
	#works .slick-arrow{
		position: absolute;
		top: calc(50% - 0.5em);
		fill: #333;
		transition: all 0.2s ease-out;
		opacity: 0.5;
		z-index: 10;
		}
		#works .slick-arrow:hover,
		#works .slick-arrow:active{
			cursor: pointer;
			opacity: 1;
			}
		#works .slick-arrow svg{
			margin-left: -0.25em;
			}
	#works .slick-prev{
		transform: scale(-1, 1);
		}

#message{
	padding-bottom: 0;
	}
	#message h2{
		display: none;
		}
	#message footer{
		position: absolute;
		width: 100%;
		}
	#message .wrap{
		position: relative;
		}
	#message .thumbBox{
		padding-top: 68.55%;
		background-size: cover;
		background-position: bottom center;
		}
		#message .thumbBox img{
			object-fit: cover;
			object-position: bottom center;
			}


/* for mobile */
@media (max-width: 767px) {
/*767px以下*/
#hero{}
	.done #hero>div+div{
		-webkit-animation: none;
		animation: none;
		}
	#hero>div+div{
		opacity: 1;
		}
	#hero dt{
		font-size: 1.3em;
		}
#works{}
	#works li{
		margin: 0 0.5em;
		}
	#works .slick-arrow{
		font-size: 3em;
		}
	#works .slick-prev{
		left: -0.15em;
		}
	#works .slick-next{
		right: -0.15em;
		}
#message{}
	#message footer{
		bottom: 2em;
		}
.linkBut.more{
	width: 15em;
	}
}
@media (max-width: 767px) and (orientation:portrait) {
/*767px以下 縦向き*/
#hero{
	padding-bottom: 0;
	}
	#hero>div+div{
		position: static;
		}
	#hero dl{
		margin-left: auto;
		padding: 1em 0;
		color: inherit;
		text-align: center;
		}
		#hero dl:before{
			content: none;
			}
#vegas{
	width: calc(100% - 1.5em);
	margin: 1.5em 1.5em 0 0;
	box-shadow: 1.5em -1.5em 0 #ce5a4a;
	}
#outline{
	padding-top: 0;
	}
	#outline header{
		position: relative;
		margin: 0 -1em;
		padding: 1em;
		background: #80bcc4;
		}
		#outline header:before{
			content: "";
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background: url('data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiDQoJIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHhtbG5zOmE9Imh0dHA6Ly9ucy5hZG9iZS5jb20vQWRvYmVTVkdWaWV3ZXJFeHRlbnNpb25zLzMuMC8iDQoJIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iMTBweCIgaGVpZ2h0PSIxMHB4IiB2aWV3Qm94PSIwIDAgMTAgMTAiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDEwIDEwOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+DQo8c3R5bGUgdHlwZT0idGV4dC9jc3MiPg0KCS5zdDB7ZmlsbDojRkZGRkZGO30NCjwvc3R5bGU+DQo8cGF0aCBjbGFzcz0ic3QwIiBkPSJNMCwwdjRsNC00SDB6IE0wLDEwaDRsNi02VjBMMCwxMHoiLz4NCjwvc3ZnPg==');
			background-size: 5px;
			opacity: 0.3;
			}
	#outline p{
		position: relative;
		color: #fff;
		font-size: 1em;
		}
	#outline dl{
		margin: 0 -1em;
		}
	#outline dt{
		width: 6em;
		}
	#outline dd{
		width: calc(100% - 6em);
		}
#message{
	overflow: hidden;
	}
	#message figure{
		margin: 0 -1em;
		}
	#message .thumbBox{
		padding-top: 80%;
		}
}
@media (max-width: 767px) and (orientation:landscape) {
/*767px以下 横向き*/
#hero{}
	#hero dl{
		padding-left: 23em;
		}
#outline{}
	#outline p{}
		#outline p br{
			display: none;
			}
}


/* for TabletPC */
@media (min-width: 768px) {
/*768px以上*/
#hero{}
	#hero dt{
		font-size: 1.6em;
		}
	#hero dd{
		font-size: 1.2em;
		}
#works{}
	#works li{
		margin: 0 1em;
		}
	#works .slick-arrow{
		font-size: 5em;
		}
	#works .slick-prev{
		left: 0;
		}
	#works .slick-next{
		right: 0;
		}
#message{}
	#message footer{
		bottom: 2em;
		}
	#message .thumbBox{
		padding-top: 72.55%;
		}
.linkBut{}
	.linkBut.more{
		min-width: 16em;
		}
}
@media (min-width: 768px) and (max-width: 991px) {
/*768px～991px*/
#hero{}
	#hero dl{
		padding-left: 25em;
		}
}
@media (max-width: 991px) {
/*991px以下*/
#works{}
	#works .slick-slide{
		opacity: 0.5;
		transition: opacity 0.2s ease-out;
		}
	#works .slick-active{
		opacity: 1;
		}
}


/* for PC */
@media (min-width: 992px) {
/*992px以上*/
#hero{
	margin-top: 1em;
	}
	#hero dl{
		padding-left: 39em;
		}
	#hero dt{
		font-weight: 500;
		}
	#hero dd{
		font-weight: 400;
		}
#vegas{}
	#vegas.thumbBox{
		padding-top: 30em;
		}
#outline{}
	#outline dl{}
		#outline dl > *{
			padding: 1em;
			}
	#outline dt{
		width: 15em;
		}
	#outline dd{
		width: calc(100% - 15em);
		}
#works{}
	#works p{
		font-size: 1.2em;
		}
	#works .slick{
		margin: 0 calc(-940px + 50% - 1em);
		}
		#works .slick:before,
		#works .slick:after{
			content: "";
			position: absolute;
			top: 0;
			width: calc(50% - 470px);
			height: 100%;
			background: rgba(255,255,255,0.5);
			z-index: 1;
			}
		#works .slick:before{
			left: 0;
			}
		#works .slick:after{
			right: 0;
			}
	#works .slick-arrow{
		font-size: 4em;
		}
	#works .slick-prev{
		left: calc(470px - 1em);
		}
	#works .slick-next{
		right: calc(470px - 1em);
		}
}
@media (min-width: 992px) and (max-width: 1199px) {
/*992px～1200px*/
}
@media (min-width: 1200px) {
/*1200px以上*/
#hero{}
	#hero dl{
		padding: 3em 0;
		padding-left: 40em;
		}
		#hero dl:before{
			margin-left: -3em;
			}
	#hero dt{
		font-size: 2.2em;
		}
	#hero dd{
		margin-top: 1em;
		font-size: 1.3em;
		}
#outline{}
	#outline dl{
		padding: 0 100px;
		}
#works{}
	#works .slick{
		margin: 0 calc(-1140px + 50% - 1em);
		margin-top: 3em;
		}
		#works .slick:before,
		#works .slick:after{
			width: calc(50% - 570px);
			}
	#works .slick-prev{
		left: calc(570px - 1em);
		}
	#works .slick-next{
		right: calc(570px - 1em);
		}
#greeting{}
	#greeting figure{
		padding: 0 100px;
		}
}


/* ie */
@media all and (-ms-high-contrast: none){}


/* animation */
@-webkit-keyframes hero {
	0%{opacity: 0}
	100%{opacity: 1}
	}
@keyframes hero {
	0%{opacity: 0}
	100%{opacity: 1}
	}