/*----------------------------------------------------
**
** GRANTEST Inc. / example.css
**
** Ver.1.0.0
**
** copyright 2020 GRANTEST Inc.
**
**----------------------------------------------------
** web font
**----------------------------------------------------
** font-family:'Bebas Neue',cursive;
**----------------------------------------------------
** Common settings
**----------------------------------------------------*/
div.examplewrap{
	text-align:center;
}
div.examplewrap > article{
	display:block;
	text-align:left;
	position:relative;
	overflow:hidden;
	z-index:1;
	max-width:320px;
	background-color:#FFF;
	margin:0 auto 20px auto;
}
div.examplewrap.viewtargetwrap > article{
	transition:all 0.6s ease;
	transform:scale(0.7);
	opacity:0;
}
div.examplewrap.viewtargetwrap > article.visible{
	transform:scale(1);
	opacity:1;
}
div.examplewrap > article a{
	display:block;
	box-sizing:border-box;
	position:absolute;
	z-index:3;
	top:0;
	right:0;
	bottom:0;
	left:0;
	padding:255px 10px 0 10px;
	line-height:30px;
	text-decoration:none;
	text-align:left;
	background-color:rgba(255,255,255,0);
	color:#445;
	font-size:16px;
	overflow:hidden;
	text-overflow:ellipsis;
	white-space:nowrap;
}
div.examplewrap > article a::before{
	position:absolute;
	font-family:'Raleway';
	color:#FFF;
	z-index:3;
	right:10px;
	top:10px;
	white-space:nowrap;
	font-size:24px;
	line-height:24px;
	height:24px;
}
div.examplewrap > article.graphic a::before{
	content:'GRAPHIC DESIGN';
}
div.examplewrap > article.website a::before{
	content:'WEBSITE PRODUCTION';
}
div.examplewrap > article.system a::before{
	content:'SYSTEM CONSTRUCTION';
}
div.examplewrap > article.branding a::before{
	content:'BRANDING';
}
div.examplewrap > article.consulting a::before{
	content:'IT CONSULTING';
}
div.examplewrap > article.management a::before{
	content:'WEBSITE MANAGEMENT';
}
div.examplewrap > article figure{
	display:block;
	width:100%;
	height:250px;
	overflow:hidden;
	position:relative;
	z-index:1;
}
div.examplewrap > article figure::after{
	position:absolute;
	z-index:2;
	content:'';
	background:-webkit-linear-gradient(top, rgba(68,68,85,0.1) 0%,rgba(34,34,51,0.5) 100%);
	background:linear-gradient(to bottom, rgba(68,68,85,0.1) 0%,rgba(34,34,51,0.5) 100%);
	top:0;
	right:0;
	bottom:0;
	left:0;
	display:block;
}
div.examplewrap > article figure picture{
	position:absolute;
	z-index:1;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
}
div.examplewrap > article figure img{
	width:320px;
	height:320px;
	object-fit: cover;
}
div.examplewrap > article figure h3,
div.examplewrap > article figure h4{
	position:absolute;
	display:inline-block;
	max-width:calc( 100% - 20px );
	z-index:3;
	left:10px;
	line-height:20px;
	height:20px;
	background-color:rgba(0,0,0,0);
	color:#FFF;
}
div.examplewrap > article figure h3{
	bottom:10px;
}
div.examplewrap > article figure h4{
	bottom:30px;
}
div.examplewrap > article figure h4 span{
	color:#FFF;
}
div.examplewrap > article figure h4 span:nth-child(1)::after{
	content:'|';
	margin:0 0.5em;
}
div.examplewrap > article figure h3::before{
	font-family:'Raleway';
	content:'CLIENT';
	margin:0 0.5em 0 0;
	font-size:12px;
}
div.examplewrap > article > p{
	padding:35px 10px 5px 10px;
	opacity:0.8;
	line-height:20px;
}
div.examplewrap > article > div{
	padding:0 10px 10px 10px;
	line-height:20px;
	display:flex;
	flex-wrap:wrap;
}
div.examplewrap > article > div p{
	display:inline-block;
	font-size:12px;
	line-height:20px;
}
div.examplewrap > article > div p::after{
	content:'|';
	margin:0 0.5em;
}
div.examplewrap > article > div p:last-child::after{
	display:none;
}
section.example{
	background-image:url(../img/pattern_03.png);
	background-position:center top;
	background-size:10px 10px;
	background-repeat:repeat;
	background-color:#f2f2f3;
}
div.exampleimgarea{
	text-align:center;
}
div.exampleimgarea > h2{
	position:relative;
	z-index:1;
	font-weight:700;
}
div.exampleimgarea > h2::before{
	font-family:'Raleway';
	content:'PROJECT NAME';
	color:#fff;
	background-color:#0bf;
	font-weight:700;
	padding:0 0.5em;
	border-radius:5px;
}
div.exampleimgarea > h2::after{
	display:block;
	font-family:'Oswald';
	white-space:nowrap;
	color:#445;
	position:absolute;
	z-index:1;
	font-weight:400;
	background-image:url(../img/example/title.png);
	background-position:left bottom;
	background-repeat:no-repeat;
	
}
.graphic div.exampleimgarea > h2::after{
	content:'PRODUCTION OF GRAPHIC DESIGN';
}
.website div.exampleimgarea > h2::after{
	content:'PRODUCTION OF WEBSITE';
}
.system div.exampleimgarea > h2::after{
	content:'SYSTEM CONSTRUCTION';
}
.management div.exampleimgarea > h2::after{
	content:'WEBSITE MANAGEMENT';
}
div.exampleimgarea div.website div.imgwrap,
div.exampleimgarea div.system div.imgwrap{
	background-position:center top;
	background-repeat:no-repeat;
	background-size:100px 50px;
}
div.exampleimgarea div.website div.imginner,
div.exampleimgarea div.system div.imginner{
	position:relative;
	z-index:1;
	margin:0 auto;
	width:900px;
	height:450px;
}
div.exampleimgarea div.website div.imginner::after,
div.exampleimgarea div.system div.imginner::after{
	position:absolute;
	z-index:3;
	width:900px;
	height:450px;
	top:0;
	left:0;
	display:block;
	content:'';
}
div.exampleimgarea div.website div.imginner img{
	position:absolute;
	z-index:2;
	width:100%;
	top:0;
	left:0;
}
div.exampleimgarea div.website div.imginner > div,
div.exampleimgarea div.system div.imginner > div{
	position:absolute;
	z-index:-1;
	background-position:center center;
	background-repeat:no-repeat;
	background-size:80px 20px;
	background-color:#FFF;
}
div.exampleimgarea div.website div.mobile,
div.exampleimgarea div.system div.mobile{
	transform-origin:left bottom;
	left:20px;
	bottom:60px;
	width:93.75px;
	height:203px;
}
div.exampleimgarea div.website div.tablet,
div.exampleimgarea div.system div.tablet{
	transform-origin:right bottom;
	right:30px;
	bottom:75px;
	width:192px;
	height:256px;
}
div.exampleimgarea div.website div.pc,
div.exampleimgarea div.system div.pc{
	transform-origin:left bottom;
	left:155px;
	bottom:50px;
	width:480px;
	height:270px;
}
div.exampleimgarea div.website iframe{
	position:relative;
	z-index:1;
	display:block;
	transform-origin:left top;
	transform:scale(0.25);
}
div.exampleimgarea div.system div.imginner > div img{
	width:100%;
}
div.pageheader.example{
	background-image:url(../img/pattern_03.png);
	background-position:center bottom;
	background-size:10px 10px;
	background-repeat:repeat;
	background-color:#f2f2f3;
}
div.exampleimgarea div.website div.btnarea a{
	display:inline-block;
	position:relative;
	z-index:1;
	background-color:#445;
	color:#FFF;
	padding:0 calc( 1em + 30px ) 0 1em;
	margin:0 auto;
	font-weight:700;
	border-radius:5px;
}
div.exampleimgarea div.website div.btnarea a::after{
	content:'/website';
}
div.exampleimgarea div.website div.btnarea a::before{
	content:'';
	display:block;
	position:absolute;
	z-index:1;
	background-image:url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 32 32"><path fill="%23FFF" d="M10.667 22.4h14.933c1.178 0 2.133-0.956 2.133-2.133v-12.8c0-1.178-0.956-2.133-2.133-2.133h-14.933c-1.178 0-2.133 0.956-2.133 2.133v12.8c0 1.178 0.956 2.133 2.133 2.133zM25.6 20.267h-14.933v-12.8h14.933v12.8zM4.267 11.733v12.8c0 1.178 0.956 2.133 2.133 2.133h14.933c1.178 0 2.133-0.956 2.133-2.133h-17.067v-14.933c-1.178 0-2.133 0.956-2.133 2.133z" /></svg>');
	background-position:center center;
	background-size:20px 20px;
	background-repeat: no-repeat;
	width:20px;
	height:20px;
	top:50%;
	transform:translateY(-50%);
	right:10px;
}
#detailwrap div.concept{
	position:relative;
	z-index:1;
}
#detailwrap div.concept::before{
	content:'CONCEPT';
	font-family:'Raleway';
	color:#FFF;
	font-weight:700;
	background-color:#0bf;
	border-radius:5px;
	display:table;
	padding:0 0.5em;
}
#detailwrap div.concept ul{
	display:flex;
	flex-wrap:wrap;
	list-style:none;
	list-style-position:outside;
}
#detailwrap div.concept ul li{
	margin:0 0.5em 0.5em 0;
}
#detailwrap div.concept ul li h3{
	padding:0 0.5em;
	background-color:#f2f2f6;
	border-radius:2px;
}
#detailwrap div.concept ul li.active h3{
	background-color:#445;
	color:#fff;
}
#detailwrap.graphic div.exampleimgarea div.website,
#detailwrap.graphic div.exampleimgarea div.system,
#detailwrap.graphic div.exampleimgarea div.management,
#detailwrap.website div.exampleimgarea div.graphic,
#detailwrap.website div.exampleimgarea div.system,
#detailwrap.website div.exampleimgarea div.management,
#detailwrap.system div.exampleimgarea div.graphic,
#detailwrap.system div.exampleimgarea div.website,
#detailwrap.system div.exampleimgarea div.management,
#detailwrap.management div.exampleimgarea div.graphic,
#detailwrap.management div.exampleimgarea div.website,
#detailwrap.management div.exampleimgarea div.system{
	display:none;
}
section#detailwrap > div.inner .clientdata h2::before{
	content:'CLIENT';
	font-family:'Raleway';
	color:#FFF;
	font-weight:700;
	background-color:#0bf;
	border-radius:5px;
	display:table;
	padding:0 0.5em;
}
section#detailwrap > div.inner .clientdata h2::after{
	content:' 様';
}
section#detailwrap > div.inner .clientdata h3 span:last-of-type::before{
	content:' / '
}
section#detailwrap > div.inner .clientdata p{
	line-height:2em;
}
section#detailwrap > div.inner .clientdata a{
	font-family:'Raleway';
	background-image:url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 32 32"><path fill="%23445" d="M10.667 22.4h14.933c1.178 0 2.133-0.956 2.133-2.133v-12.8c0-1.178-0.956-2.133-2.133-2.133h-14.933c-1.178 0-2.133 0.956-2.133 2.133v12.8c0 1.178 0.956 2.133 2.133 2.133zM25.6 20.267h-14.933v-12.8h14.933v12.8zM4.267 11.733v12.8c0 1.178 0.956 2.133 2.133 2.133h14.933c1.178 0 2.133-0.956 2.133-2.133h-17.067v-14.933c-1.178 0-2.133 0.956-2.133 2.133z" /></svg>');
	background-position:right center;
	background-size:20px 20px;
	background-repeat: no-repeat;
	line-height:20px;
	padding:0 20px 0 0;
	text-decoration:underline;
	font-weight:700;
}
section#detailwrap > div.inner .detail img{
	width:100%;
}
div.exampleimgarea div.graphic::after{
	content:'';
	display:block;
	position:absolute;
	z-index:3;
	top:0;
	right:0;
	bottom:0;
	left:0;
}
div.exampleimgarea div.graphic div.productimg div.productimgwrap{
	width:640px;
	height:360px;
}
div.exampleimgarea div.graphic div.productimg div.productimgwrap > div{
	width:640px;
	height:360px;
}
div.exampleimgarea div.graphic div.productimg div.productimgwrap > div img{
	width:640px;
	height:360px;
}
#detailwrap div.inner{
	position:relative;
	z-index:1;
}
#detailwrap div.inner::before{
	content:'PRODUCTION CONTENT';
	font-family:'Oswald';
	display:block;
	text-align:center;
	color:#0bf;
}
/*----------------------------------------------------
** Retina Display
**----------------------------------------------------*/
@media only screen and (-webkit-min-device-pixel-ratio:2), (min-resolution: 2dppx){
}
@media screen and (max-width:767px){
	div.exampleimgarea > h2{
		padding:90px 15px 20px 15px;
		font-size:16px;
		line-height:20px;
		text-align:left;
	}
	div.exampleimgarea > h2::before{
		display:table;
		font-size:12px;
		line-height:20px;
		margin:0 0 10px 0;
	}
	div.exampleimgarea > h2::after{
		top:15px;
		left:15px;
		line-height:1em;
		padding:0 0 20px 0;
		background-size:300px 15px;
	}
	.graphic div.exampleimgarea > h2::after,
	.graphic div.inner::before{
		font-size:calc(( 100vw - 30px ) / 12.5 );
	}
	.website div.exampleimgarea > h2::after,
	.website div.inner::before{
		font-size:calc(( 100vw - 30px ) / 9.5 );
	}
	.system div.exampleimgarea > h2::after,
	.system div.inner::before{
		font-size:calc(( 100vw - 30px ) / 9 );
	}
	.management div.exampleimgarea > h2::after,
	.management div.inner::before{
		font-size:calc(( 100vw - 30px ) / 8.6 );
	}
	#detailwrap div.inner{
		padding:20px 0 0 0;
	}
	#detailwrap div.inner::before{
		line-height:50px;
	}
	div.exampleimgarea div.website{
	}
	div.exampleimgarea div.website div.imgwrap,
	div.exampleimgarea div.system div.imgwrap{
		overflow-x:auto;
		background-image:url(../img/example/responsive@2x.png);
		-ms-overflow-style:none;
		scrollbar-width:none;
	}
	div.exampleimgarea div.website div.imginner,
	div.exampleimgarea div.system div.imginner{
		overflow:hidden;
	}
	div.exampleimgarea div.website div.imginner > div,
	div.exampleimgarea div.system div.imginner > div{
		background-image:url(../img/example/undisclosed.png);
	}
	div.exampleimgarea div.website div.btnarea{
		padding:20px 0;
	}
	div.exampleimgarea div.website div.btnarea a{
		line-height:40px;
	}
	#detailwrap div.concept{
		padding:20px 15px 0 15px;
	}
	#detailwrap div.concept::before{
		line-height:20px;
		font-size:12px;
		margin:0 0 10px 0;
	}
	#detailwrap div.concept p{
		line-height:2em;
		padding:0 calc(( 100vw - 30px - ( 1em * 24 )) / 2 );
	}
	#detailwrap div.concept ul{
		padding:40px 0 0 0;
	}
	section#detailwrap > div.inner .clientdata{
		margin:30px 15px 0 15px;
		padding:0 0 30px 0;
	}
	section#detailwrap > div.inner .clientdata{
		margin:30px 15px 0 15px;
		padding:0 0 30px 0;
	}
	section#detailwrap > div.inner .clientdata div.contentsinner > *{
		margin:10px 0 0 0;
	}
	section#detailwrap > div.inner .clientdata h2::before{
		margin:0 0 5px 0;
		line-height:20px;
		font-size:12px;
	}
	#detailwrap div.inner{
		border-top:solid 1px #dbdbdb;
		margin:50px 0 0 0;
	}
	#detailwrap div.articlewrap article{
		padding:0 0 1.5em 0;
		margin:30px 0 0 0;
		position:relative;
		z-index:1;
	}
	#detailwrap div.articlewrap article::before{
		content:'';
		display:block;
		width:2px;
		top:0;
		bottom:0;
		left:10px;
		background-color:#0bf;
		position:absolute;
		z-index:1;
	}
	#detailwrap div.articlewrap article h3{
		font-size:16px;
		font-weight:700;
		padding:10px 15px 20px 20px;
	}
	#detailwrap div.articlewrap article p{
		line-height:2em;
		padding:20px 15px 0 20px;
	}
	div.exampleimgarea div.graphic{
		overflow:hidden;
		height:250px;
		position:relative;
		z-index:1;
	}
	div.exampleimgarea div.graphic div.cover{
		position:absolute;
		z-index:2;
		width:400px;
		height:250px;
		top:0;
		right:0;
	}
	div.exampleimgarea div.graphic div.productimg{
		perspective:900px;
		width:320px;
		margin:0 0 0 auto;
	}
	div.exampleimgarea div.graphic div.productimg > div{
		width:640px;
		height:360px;
		position: absolute;
		z-index:1;
		top:28px;
		right:43px;
		transform:rotateX(18deg) rotateY(-26deg) rotateZ(6deg) scale(0.39);
		transform-origin:top right;
		overflow:hidden;
	}
}
@media screen and (max-width:320px){
	div.examplewrap > article{
		max-width:300px;
	}
	div.examplewrap > article figure{
		height:240px;
	}
	div.examplewrap > article figure img{
		width:300px;
		height:300px;
	}
	div.examplewrap > article a{
		padding:245px 10px 0 10px;
	}
	div.examplewrap > article a::before{
		font-size:22px;
		line-height:22px;
		height:22px;
	}
	#detailwrap div.concept p{
		line-height:2em;
		padding:0 calc(( 100vw - 30px - ( 1em * 20 )) / 2 );
	}
}
@media screen and (min-width:768px) and (max-width:1099px){
}
@media (orientation: landscape) and (max-width:568px){
}
@media (orientation: landscape) and (min-width:569px) and (max-width:724px){
}
@media (orientation: landscape) and (min-width:725px) and (max-width:1099px){
}
@media screen and (min-width:1100px){
	div.examplewrap{
		width:1100px;
		margin:0 auto;
		display:flex;
		justify-content:center;
		flex-wrap:wrap;
	}
	div.examplewrap > article{
		margin:0 20px 40px 20px;
	}
	div.examplewrap > article img{
		transition:all 0.3s ease;
	}
	div.examplewrap > article:hover img{
		transform:scale(1.2) rotate(20deg);
	}
	section#detailwrap{
		padding:30px 0 60px 0;
	}
	div.exampleimgarea{
		padding:0 0 60px 0;
	}
	div.exampleimgarea div.graphic{
		perspective:900px;
		position:relative;
		z-index:1;
		width:900px;
		margin:0 auto;
	}
	div.exampleimgarea div.graphic div.cover{
		position:relative;
		z-index:2;
	}
	div.exampleimgarea div.graphic div.productimg{
		width:640px;
		height:360px;
		position: absolute;
		z-index:1;
		top:47px;
		right:90px;
		transform:rotateX(4deg) rotateY(-25deg) rotateZ(5deg) scale(0.8);
		transform-origin: top right;
	}
	div.exampleimgarea div.website div.imgwrap{
		background-image:url(../img/example/responsive.png);
	}
	div.exampleimgarea > h2{
		padding:100px 0 0 0;
		font-size:16px;
		line-height:20px;
		text-align:left;
		width:900px;
		margin:0 auto 20px auto;
	}
	div.exampleimgarea > h2::after{
		min-width:600px;
		top:0;
		left:0;
		font-size:50px;
		line-height:50px;
		background-size:600px 30px;
		padding:0 0 40px 0;
	}
	section#detailwrap > div.inner{
		display:flex;
		justify-content:space-between;
		width:1000px;
		margin:0 auto;
		padding:120px 0 0 0;
	}
	section#detailwrap > div.inner .detail{
		width:640px;
	}
	section#detailwrap > div.inner .clientdata{
		width:320px;
		position:relative;
		z-index:1;
	}
	section#detailwrap > div.inner .clientdata .contentsinner{
		position:sticky;
		top:100px;
	}
	div.concept{
		text-align:center;
		width:1100px;
		margin:0 auto;
		padding:0 100px 60px 100px;
		border-bottom:solid 1px #dbdbdb;
		box-sizing:border-box;
	}
	div.concept div.contentsinner{
		text-align:left;
	}
	div.exampleimgarea > h2::before{
		line-height:20px;
		margin:0 10px 0 0;
	}
	#detailwrap div.concept::before{
		line-height:20px;
		margin:0 0 20px 0;
	}
	div.concept div.contentsinner p{
		line-height:2em;
		font-size:16px;
		padding:0 1.5em;
	}
	div.concept div.contentsinner ul{
		padding:40px 0 0 0;
	}
	#detailwrap div.inner::before{
		display:block;
		width:100%;
		font-size:50px;
		line-height:50px;
		position:absolute;
		z-index:1;
		top:30px;
	}
	section#detailwrap > div.inner .clientdata h2::before{
		line-height:20px;
		margin:0 0 20px 0;
	}
	section#detailwrap > div.inner .clientdata .contentsinner h2{
		font-weight:700;
		font-size:16px;
		margin:0 0 20px 0;
	}
	section#detailwrap > div.inner .clientdata .contentsinner h2::after{
		font-weight:400;
		font-size:14px;
	}
	section#detailwrap > div.inner .clientdata .contentsinner h3,
	section#detailwrap > div.inner .clientdata .contentsinner p{
		margin:0 0 20px 0;
	}
	section#detailwrap > div.inner .detail div.articlewrap article{
		position:relative;
		z-index:1;
		margin:30px 0 0 0;
	}
	section#detailwrap > div.inner .detail div.articlewrap article:nth-of-type(1){
		margin:0;
	}
	section#detailwrap > div.inner .detail div.articlewrap article::after{
		position:absolute;
		z-index:2;
		content:'';
		display:block;
		left:10px;
		top:0;
		bottom:0;
		background-color:#0bf;
		width:2px;
	}
	section#detailwrap > div.inner .detail div.articlewrap article h3{
		font-size:18px;
		font-weight:700;
		margin:0 0 30px 0;
		padding:10px 0 0 20px;
	}
	section#detailwrap > div.inner .detail div.articlewrap article p{
		font-size:16px;
		line-height:2em;
		padding:30px 1.5em 10px 20px;
	}
	section#detailwrap > div.inner .detail div.articlewrap article img{
		width:100%;
	}
}
/*----------------------------------------------------
** Internet Explorer
**----------------------------------------------------*/