/* CSS Document */
@media screen and (max-width:767px){
}
@media screen and (min-width:768px) and (max-width:1099px){
  /*TB*/
  /*ページャー*/
  div.pageheader div.inner{
    padding: 0 20px 10px;
    box-sizing: border-box;
    width: 100%;
  }
   div.pageheader {
    min-height: 100px;
     margin-top: -70px;
  }
  /*コンテンツ*/
  section.example{
    padding-bottom: 50px;
  }
  .exampleimgarea{
    padding-bottom: 60px;
  }
  div.exampleimgarea > h2{
		padding:100px 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 30px 0;
    background-size: 600px 30px;
	}
	.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:50px;
	}
	.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 );
	}
  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 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;
  }
  .concept{
    width: 640px;
    margin: 0 auto;
  }
  #detailwrap div.concept{
	  position:relative;
	  z-index:1;
  }
  #detailwrap div.concept::before{
    margin-bottom: 20px;
  }
  #detailwrap div.concept  p{
    line-height: 2em;
  }
  #detailwrap div.concept ul{
    margin-top: 20px;
  }
  #detailwrap div.inner{
    width: 640px;
    margin: 0 auto;
  }
  #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;
	}
  section#detailwrap > div.inner .clientdata h2::before{
    margin-bottom: 7.5px;
  }
  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;
  }
  .clientdata {
    margin: 30px 15px 0 15px;
    padding: 0 0 30px 0;
  }
  section#detailwrap > div.inner .clientdata div.contentsinner > *{
    margin-top: 10px;
  }
}

@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){
  /*共通*/
  /*pageheader*/
  .div.pageheader{
  }
  div.pageheader div.video{
    height: 500px;
    width: 100%;
  }
  div.pageheader div.video::before{
    background-image: url(../img/pattern_01.png);
  }
  div.pageheader div.video video{
    width: 100vw;
  }
  
  .inner > h2{
    font-size: 24px;
    text-align: center;
    padding: 50px 0 20px;
  }
}