@charset "UTF-8";
/* /fcroman/strategy/css/post.css */

@import '/fcroman/strategy/design/font/Scriber_Bold_Stencil/stylesheet.css';

html,body{
	height: 100%;
}

#ready{
	z-index:100;
	position: fixed;
	height: 100%;
	width: 100%;
	background-color: rgba(0,0,0,0.7);
	color: #fff;
}
#ready p{
	position: absolute;
	font-size: 50px;
	text-align:center;
	top: 50%;
	margin-top: -25px;
	width: 100%;
	font-family:"Scriber Bold Stencil";
	font-weight: bold;
}

body{
	background: url(../img/bg.gif) fixed;
	color: #333;
	font-family: Quicksand, 游ゴシック体, "Yu Gothic", YuGothic, "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
a img{
	opacity: 1;
	transition-property: all;
	transition-duration: 0.4s;
	transition-timing-function: ease-out;
}
a:hover img{
	opacity: 0.6;
}

/*make*/
/******************************************************************************
contents
******************************************************************************/
#contents{
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -300px 0 0 -480px;
	width: 960px;
	height: 600px;
}
#contents h1{
	color: #63bc9a;
	font-family:"Scriber Bold Stencil";
	font-size: 4.8em;
	line-height: 1.2;
	margin-bottom: 25px;
	text-align: center;
}
/*------------------------------*/
/*block-picth*/
/*------------------------------*/
.block-picth .image{
	position: relative;
	float: left;
	width: 450px;
	height: 500px;
	background: url(../img/pitch-large.png) no-repeat left top;
}
.block-picth .image img{
	width: 100%;
	height: auto;
}
/*------------------------------*/
/*block-post*/
/*------------------------------*/
.block-post{
	float: right;
	width: 480px;
	margin-bottom: 10px;
}
.block-post h2{
	font-size: 1.6em;
	line-height: 1.0;
	margin-bottom: 8px;
}
/*block-make*/
.block-make{
	float: left;
	width: 200px;
}
.block-make .block{
	margin-bottom: 20px;
}
.block-make .block .pencil{
}
.block-make .block .pencil li{
	border: solid 1px #63bc9a;
	border-radius: 3px;
	margin-bottom: 1px;
	display: table;
	width: 100%;
}
.pencil li p.ic{
	display: table-cell;
	width: 38px;
	position: relative;
}
.pencil li.free i{
	font-size: 1.2rem;
	margin: 0px 10px 0 11px;
}
.pencil li.ball span{
	display: inline-block;
	width: 14px;
	height: 14px;
	border-radius: 7px;
	background: #ce1515;
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -7px 0 0 -7px;
}
.pencil li.of span{
	display: inline-block;
	width: 14px;
	height: 14px;
	border-radius: 7px;
	background: #0072ff;
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -7px 0 0 -7px;
}
.pencil li.df span{
	display: inline-block;
	width: 14px;
	height: 14px;
	border-radius: 7px;
	background: #fa961f;
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -7px 0 0 -7px;
}
.pencil li.ball-move span{
	display: inline-block;
	width: 14px;
	height: 3px;
	background: #ce1515;
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -1px 0 0 -7px;
}
.pencil li.of-move span{
	display: inline-block;
	width: 14px;
	height: 3px;
	background: #0072ff;
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -1px 0 0 -7px;
}
.pencil li.df-move span{
	display: inline-block;
	width: 14px;
	height: 3px;
	background: #fa961f;
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -1px 0 0 -7px;
}
.pencil li p.txt{
	font-size: 1.5em;
	line-height: 1.0;
	display: table-cell;
	verticla-align: middle;
	padding: 7px;
	cursor: pointer;
}
.pencil li p.txt:hover,
.pencil p.on.txt{
	background: #63bc9a;
	color: #fff;
}
/*block-select*/
.block-select{
}
.block-select p{
	width: 93px;
	height: 45px;
	text-align: center;
	padding: 7px 0;
	border-radius: 3px;
	border: solid 1px #63bc9a;
	box-sizing: border-box;
	cursor: pointer;
}
.block-select p:hover,
.block-select p.on{
	background: #63bc9a;
	color: #fff;
}
/*block-comment*/
.block-comment{
	float: right;
	width: 250px;
}
.block-comment dt{
	font-size: 1.6em;
	font-weight: bold;
	line-height: 1.0;
	margin-bottom: 10px;
}
.block-comment dd{
	margin-bottom: 10px;
}
.block-comment input.field{
	width: 238px;
	padding: 5px;
	border: solid 1px #ccc;
	margin-bottom: 10px;
}
.block-comment textarea.field{
	width: 238px;
	padding: 5px;
	height: 255px;
	border: solid 1px #ccc;
}
.block-comment p.submit-btn{
	text-align: center;
	padding-top: 10px;
}
/*explain*/
.explain{
	border: solid 1px #ddd;
	padding: 20px;
	background: #fff;
}
.explain p{
	font-size: 1.4em;
	line-height: 1.7;
	margin-bottom: 15px;
}
.explain p.mail{
	padding: 10px 0;
	background: #eee;
	text-align: center;
}
/*bt-confirm*/
.bt-confirm{
	text-align: center;
	transition-property: all;
	transition-duration: 0.4s;
	transition-timing-function: ease-out;
}

/*** canvas ***/
.canvas-container{
	float: left;
}



/*confirm*/
/******************************************************************************
contents
******************************************************************************/
body.confirm .block-comment{
	float: right;
	width: 480px;
}
body.confirm .block-comment dl{
	margin-bottom: 30px;
}
body.confirm .block-comment dt{
	font-size: 1.6em;
	font-weight: bold;
	line-height: 1.0;
	margin-bottom: 10px;
}
body.confirm .block-comment dd{
	margin-bottom: 20px;
	border: solid 1px #ddd;
	padding: 8px;
	font-size: 1.4em;
	line-height: 1.7;
	background: #fff;
	max-height: 220px;
	overflow: auto;
}
body.confirm .block-comment ul{
	text-align: center;
}
body.confirm .block-comment ul li{
	display: inline-block;
	margin: 0 10px;
}

/*thanks*/
/******************************************************************************
contents
******************************************************************************/
body.thanks #contents{
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -193px 0 0 -120px;
	width: 240px;
	height: 386px;
}
body.thanks #contents h1{
	margin-bottom: 15px;
}
body.thanks #contents .logo{
	text-align: center;
	margin-bottom: 25px;
}
body.thanks #contents .logo img{
	width: 120px;
	height: auto;
}
body.thanks #contents .bt{
	text-align: center;
	margin-bottom: 25px;
}