/*--- Memo ------------------------------------------------------------------------

** CreateシリーズLP CSS
** 接頭辞 "cre-"
** 2018/7/10

------------------------------------------------------------------------ Memo ---*/

@charset "utf-8";

.cf:after{
  content: ".";
  display: block;
  height: 0;
  font-size:0;
  clear: both;
  visibility:hidden;
}

.cf{display: inline-block;}


/* Hides from IE Mac \*/
* html .cf {height: 1%;}
.cf{display:block;}
/* End Hack */


div#wrapper{
	width: 980px;
	margin: 10px auto 25px auto;
}

.common_box{
	font-family: ArialMT, "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", メイリオ, sans-serif;
	width: 980px;	
	margin: 0 auto;
}

.grade_box{
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,000000+100 */
	background: #ffffff; /* Old browsers */
	background: -moz-linear-gradient(top, #ffffff 0%, #000000 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, #ffffff 0%,#000000 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, #ffffff 0%,#000000 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#000000',GradientType=0 ); /* IE6-9 */
}

.common_box:last-child{
	margin: 0 auto;
}

h1#toptitle{
	width: 100%;
	height: 420px;
	background: url(images/cre_img_create.png);
	background-size: 100%;
}

p#leadtext{
	width: 100%;
	box-sizing: border-box;
	padding: 50px 0;
	font-size: 20px;
	line-height: 1.5;
	text-align: center;
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#cccccc+0,ffffff+5,ffffff+13,ffffff+95,cccccc+100 */
	background: #cccccc; /* Old browsers */
	background: -moz-linear-gradient(top, #cccccc 0%, #ffffff 5%, #ffffff 13%, #ffffff 95%, #cccccc 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, #cccccc 0%,#ffffff 5%,#ffffff 13%,#ffffff 95%,#cccccc 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, #cccccc 0%,#ffffff 5%,#ffffff 13%,#ffffff 95%,#cccccc 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cccccc', endColorstr='#cccccc',GradientType=0 ); /* IE6-9 */
}

div.line-grade{
	margin: 75px 0;
	width: 100%;
	height: 4px;
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+0,ffffff+25,ffffff+75,000000+100 */
	background: #000000; /* Old browsers */
	background: -moz-linear-gradient(left, #000000 0%, #ffffff 25%, #ffffff 75%, #000000 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(left, #000000 0%,#ffffff 25%,#ffffff 75%,#000000 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to right, #000000 0%,#ffffff 25%,#ffffff 75%,#000000 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#000000',GradientType=1 ); /* IE6-9 */
}

h2.topictitle{
	width: 100%;
	height: 315px;
}

h2#topic_hardware{
	background: url(images/cre_01hard-top.png);
	background-size: 100%;
}

h2#topic_quadro{
	background: url(images/cre_02quadro-top.png);
	background-size: 100%;
}

h2#topic_display{
	background: url(images/cre_03display-top.png);
	background-size: 100%;
}

h2#topic_lineup{
	background: url(images/cre_04lineup-top.png);
	background-size: 100%;
}

div#topic_factory{
	width: 100%;
	height: 644px;
	background: url(images/cre_05fact-back.png);
	background-size: 100%;
	padding: 20px;
}

div.topicbox{
	width: 100%;
	box-sizing: border-box;
	padding: 4%;
}

div.topicdetail01{
	float: left;
	margin-right: 4.2%;
	width: 30.5%;
	box-sizing: border-box;	
}

div.topicdetail01:last-child{
	float: right;
	width: 30.5%;
	margin-right: 0%;
	box-sizing: border-box;	
}

img.imgresize{
	width: 100%;
}

p.topicdetailtext{
	margin-top: 5px;
	font-size: 14px;
	color: #FFFFFF;
}

span.caption{
	font-size: 10px;
	color: #FFFFFF;
	margin-left: 78%; 
}

div.topicdetail02{
	float: left;
	margin-right: 2.6%;
	width: 23%;
	box-sizing: border-box;	
}

div.topicdetail02:last-child{
	float: right;
	width: 23%;
	margin-right: 0%;
	box-sizing: border-box;	
}

div#mosaic_caption{
	font-size: 10px;
	color: #FFFFFF;
	margin-top: -30px;
	margin-left: 50%; 
	padding-bottom: 20px;
}

div.topicbox_lineup{
	width: 100%;
	box-sizing: border-box;
	padding: 1% 1%;
}

div.topicdetail_lineup{
	float: left;
	margin-right: 2%;
	width: 32%;
	box-sizing: border-box;	
}

div.topicdetail_lineup:last-child{
	float: right;
	width: 32%;
	margin-right: 0%;
	box-sizing: border-box;	
}

div#fact_bg{
	background-color: rgba(255,255,255,0.8);
	width: 100%;
	box-sizing: border-box;	
	padding: 10px auto;
	text-align: center;
}

p#fact_title{
	font-size: 24px;
	font-color: #FFFFFF;
}

p#fact_subtitle{
	font-size: 18px;
	font-color: #FFFFFF;
}

p.fact_title02{
	font-size: 20px;
	font-color: #FFFFFF;
	text-align: center;
	padding: 20px 0px 35px 0px;
}

p.fact_title03{
	font-size: 20px;
	font-color: #FFFFFF;
	text-align: center;
	padding-bottom: 20px;
}

p.fact_subtitle02{
	font-size: 16px;
	font-color: #FFFFFF;
}

div.fact_bg02{
	float: left;
	margin-top: 30px;
	margin-right: 20px;
	background-color: rgba(255,255,255,0.8);
	width: 47%;
	height: 500px;
	box-sizing: border-box;	
	padding: 20px;
}

div.fact_bg02:last-child{
	float: right;
	margin-top: 30px;
	margin-right: 0px;
	background-color: rgba(255,255,255,0.8);
	width: 47%;
	box-sizing: border-box;	
	padding: 20px;
}