@charset "UTF-8";

/*	TOOL BOX
-------------------------------------------------------*/

/* For modern browsers */
.cf:before,
.cf:after {
	content:"";
	display:table;
}

.cf:after {
	clear:both;
}

/* For IE 6/7 (trigger hasLayout) */
.cf {
	zoom:1;
}
/* typography */
.error				{ border: 1px solid #fb4343; padding: 3px; color: #fb4343; }
.warning			{ border: 1px solid #d4ac0a; padding: 3px; color: #d4ac0a; }
.success			{ border: 1px solid #149b0d; padding: 3px; color: #149b0d; }
.callOut			{ font-size: 125%; font-weight: bold; }
.strikeOut			{ text-decoration: line-through; }
.underline			{ text-decoration: underline; }
.bold				{ font-weight:bold;}
.big                { font-size:1.2em; font-weight:bold; color:#666}

/* display */
.hide				{ display: none;}
.show				{ display: block;}
.invisible			{ visibility: hidden;}



.btn{
	display: inline-block;
	background-color: #CCFFFC;/*背景色*/
	color: #666;/*文字色*/
	font-size: 0.8em;/*文字サイズ*/
	line-height: 1;
	text-decoration: none;
	letter-spacing: 0.05em;/*字間*/
	padding: 0.2em 1em;/*ボタン内の余白*/
	border-radius: 3px;/*角の丸み*/
	cursor: pointer;
	box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 1px 5px 0 rgba(0,0,0,0.12), 0 3px 1px -2px rgba(0,0,0,0.2);/*影*/
	-webkit-tap-highlight-color: transparent;
	transition: .3s ease-out;/*変化を緩やかに*/
	max-width: 336px;
	width: 100%;
	line-height: 40px;
	
}

.btn:hover{
    box-shadow: 0 3px 3px 0 rgba(0,0,0,0.14), 0 1px 7px 0 rgba(0,0,0,0.12), 0 3px 1px -1px rgba(0,0,0,0.2);/*浮き上がるように*/
}




/* layout */
.float-left-img 			{ float: none; margin:auto; display:block; max-width:95%; width:100%; }
.float-right-img		{ float: none; margin:auto; display:block; max-width:95%; width:100%;  }
.clear				{ clear: both; }
.layout-center		{ margin: 0 auto; }
.txt-center			{ text-align: none; }
.txt-right			{ text-align: none; }
.txt-left			{ text-align: none; }

/* space */
.space-20px { display:block; width:100%; height:20px}
.space-40px { display:block; width:100%; height:40px}
.space-60px { display:block; width:100%; height:60px}

/*ページTOPに戻る指定*/
#page-top{
	width:50px;
	height:50px;
	display:none;
	position:fixed;
	right:16px;
	bottom:16px;
}
#page-top p{
	margin:0;
	padding:0;
	text-align:center;
	background:#3b3b3b;
	-webkit-transition:all 0.3s;
	-moz-transition:all 0.3s;
	transition:all 0.3s;
}
#page-top p:hover{
	background:#8b8b8b;
}
#move-page-top{
	color:#fff;
	line-height:50px;
	text-decoration:none;
	display:block;
	cursor:pointer;
}
/*ページTOPに戻る指定ここまで*/


@media screen and (min-width : 960px) { /* デスクトップ用CSS */

.float-left-img			{
	float: left;
	margin-right: 20px;
	display: block;
	max-width: 336px;
	width: 100%;
}
.float-right-img			{
	float: right;
	margin-left: 20px;
	display: block;
	max-width: 336px;
	width: 100%;
} 

.clear				{ clear: both; }
.layout-center		{ margin: 0 auto; }
.txt-center			{ text-align: center; }
.txt-right			{ text-align: right; }
.txt-left			{ text-align: left; }