/* リセットCSS */
html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,dialog,figure,footer,header,hgroup,menu,nav,section,menu,time,mark,audio,video{margin:0;padding:0;border:0;outline:0;vertical-align:baseline;background:transparent}body{line-height:1 font-size:84%;}article,aside,dialog,figure,footer,header,hgroup,nav,section{display:block}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}a{margin:0;padding:0;border:0;vertical-align:baseline;background:transparent}ins{background-color:#ff9;color:#000;text-decoration:none}mark{background-color:#ff9;color:#000;font-style:italic;font-weight:bold}del{text-decoration:line-through}abbr[title],dfn[title]{border-bottom:1px dotted #000;cursor:help}table{border-collapse:collapse;border-spacing:0}hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0}input,select{vertical-align:middle}body{background:#fff;color:#333;font-size:13px;font-family:"メイリオ","Meiryo",verdana,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",Osaka,"ＭＳ Ｐゴシック","MS PGothic",Sans-Serif;line-height:1.5em}img{vertical-align:top;}*{zoom:1;}ul{ list-style:none;}


body {
	background: url(../img/uploads/demo3_bg.gif) repeat-x 0 0;
}
/*----------------------------------------------------
	#wrapper（ページ全体）
----------------------------------------------------*/
#wrapper {
	width: 100%;
	clear:both;
	overflow:hidden;
	z-index:0;
}

/*----------------------------------------------------
	#contents（メインとサイド）
----------------------------------------------------*/

section {
	clear:both;
	overflow:hidden;
	width:960px;
	margin:0 auto 40px auto;
}
section.rank {
	clear:both;
	overflow:hidden;
	width:100%;
	margin:0 auto 40px auto;
	background-color:#26C9FF;
}
section.rank .in {
	width:960px;
	margin:0 auto;
	padding:30px;
}


/* リンク
----------------------------------------------------*/
/* ベーススタイル */
a {
	color:#0073BE;
}
a:hover {
	text-decoration:none;
}
a img:hover {
	opacity: 0.8;
	filter: alpha(opacity=80);
	-moz-opacity: 0.8;
}


/* ----------------------------------------------------
	■ヘッダー
---------------------------------------------------- */
header {
	clear:both;
	overflow:hidden;
	width:100%;
	margin:0 auto;
}
.mainVisual {
	background: url(../img/demo3_main.jpg) no-repeat 50% 0;
	text-align:left;
	height:526px;
	margin-bottom:30px;
}
.mainVisual h1 {
	color:#FFF;
	font-size:10px;
	font-weight:normal;
	margin:0 auto;
	width:960px;
	line-height:1;
	padding-top:3px;
}
.mainVisual .sp {
	display:none;
}


/* なぜ？
---------------------------------------------------- */
.what .base {
	background:url(../img/uploads/demo3_img1.gif) no-repeat 0 0;
	color:#FFF;
	clear:both;
	overflow:hidden;
	height:388px;
}
.what .inner {
	float:right;
	width:620px;
	margin:40px 110px 0 0;
}
.what .inner p {
	margin-bottom:15px;
}



/* ポイント
---------------------------------------------------- */
.point .box_t {
	width:291px;
	float:left;
	background:url(../img/uploads/demo3_what_bgtop.gif) no-repeat 0 0;
	margin-left:23px;
}
.point .box_b {
	background:url(../img/uploads/demo3_what_bgbt.gif) no-repeat 0 100%;
	padding:20px 20px 30px 20px ;
}
.point .img {
	text-align:center;
	margin-bottom:15px;
}
.point h3 {
	margin-bottom:10px;
	font-size:16px;
	color:#FB6A95;
}

/* ランク
---------------------------------------------------- */
section.rank .rankbox {
	background:url(../img/uploads/demo3_rank_bg.gif) repeat-y 0 0;
	border-top:#92E5FF solid 5px;
	padding:27px;
	clear:both;
	overflow:hidden;
}
section.rank .rankbox_out {
	background: url(../img/uploads/demo3_rank_bg_b.gif) no-repeat 0 100%;
	padding-bottom:16px;
	margin-bottom:30px;
}
section.rank .caparea {
	float:left;
	width:330px;
	margin-bottom:15px;
}
section.rank .txtarea {
	float:right;
	width:553px;
	margin-bottom:15px;
}
section.rank .txtarea .ttlarea {
	background:url(../img/uploads/demo3_rank_ttl_bg.gif) no-repeat 0 100%;
	clear:both;
	overflow:hidden;
	padding:0 0 28px;
	margin-bottom:15px;
}
section.rank .txtarea .ttlarea .mark {
	float:left;
	width:101px;
}
section.rank .txtarea .ttlarea .sitename {
	float:right;
	width:441px;
}
section.rank .txtarea .ttlarea h3 {
	font-size:30px;
	font-weight:bold;
}
section.rank .txtarea .ttlarea p {
	font-size:14px;
	color:#666666;
	margin:20px 0 15px;
}

section.rank .txtarea .dis {
	margin-bottom:15px;
}
section.rank .txtarea table {
	border:#eaeaea solid 1px;
	border-collapse:collapse;
	text-align:center;
	width:100%;
}
section.rank .txtarea table th {
	border:#eaeaea solid 1px;
	border-collapse:collapse;
	background-color:#8FE5FF;
	font-weight:bold;
	width:33%;
	padding:7px;
}
section.rank .txtarea table td {
	border:#eaeaea solid 1px;
	border-collapse:collapse;
	padding:7px;
	vertical-align:middle;
}
section.rank .txtarea .con_bt {
	margin:20px 0;
	text-align:center;
}
section.rank .txtarea .con_bt_sp {
	display:none;
}
section.rank .rev {
	clear:both;
	overflow:hidden;
}
section.rank .rev .inner {
	border-left:#FFEEF3 solid 3px;
	border-right:#FFEEF3 solid 3px;
	border-bottom:#FFEEF3 solid 3px;
	padding:20px;
	clear:both;
	overflow:hidden;
}
section.rank .rev .inner .imgarea {
	float:left;
	width:100px;
	margin-right:10px;
}
section.rank .rev .inner .textarea {
	float:left;
	width:730px;
}

/*流れ
----------------------------------------------------*/
section.flow dl {
	width:882px;
	margin:0 auto;
}
section.flow dt {
	background:#FD6894 url(demo3_flow_dt.gif) no-repeat 0 0;
	padding:14px 20px 10px 20px;
	color:#FFF;
	font-weight:bold;
	font-size:15px;
}
section.flow dt span {
	background-color:#FFEFF4;
	color:#FD6894;
	font-size:18px;
	padding:0 4px;
	margin-right:10px;
}

section.flow dd {
	padding:15px 20px 50px 20px ;
	box-sizing: content-box;
	clear:both;
	overflow:hidden;
	background:url(../img/uploads/demo3_flow_dd.gif) no-repeat 0 100%;
}
section.flow dd img {
	float:left;
	margin:0 20px 5px 0;
}

/*----------------------------------------------------
	#main（メインコンテンツ）
----------------------------------------------------*/

h2 {
	margin-bottom:20px;
	width:auto
}













/*----------------------------------------------------
	footer
----------------------------------------------------*/
footer {
	overflow:hidden;
	clear:both;
	padding-top:30px;
	background:#dedede;
	text-align:center;
}
footer .pagetop {
	text-align:right;
	margin-bottom:10px;
}
footer .copyarea {
	padding:20px 0;
}



/* スマホ表示 */
@media screen and (max-width:640px){
	
	/* リセットCSS */
	html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,dialog,figure,footer,header,hgroup,menu,nav,section,menu,time,mark,audio,video{margin:0;padding:0;border:0;outline:0;vertical-align:baseline;background:transparent}body{line-height:1 font-size:84%;}article,aside,dialog,figure,footer,header,hgroup,nav,section{display:block}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}a{margin:0;padding:0;border:0;vertical-align:baseline;background:transparent}ins{background-color:#ff9;color:#000;text-decoration:none}mark{background-color:#ff9;color:#000;font-style:italic;font-weight:bold}del{text-decoration:line-through}abbr[title],dfn[title]{border-bottom:1px dotted #000;cursor:help}table{border-collapse:collapse;border-spacing:0}hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0}input,select{vertical-align:middle}body{background:#fff;color:#333;font-size:small;font-family:"メイリオ","Meiryo",verdana,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",Osaka,"ＭＳ Ｐゴシック","MS PGothic",Sans-Serif;line-height:1.5em}img{vertical-align:top;}*{zoom:1;}ul{ list-style:none;}


	body {
		background:none;
	}
	/*----------------------------------------------------
		#wrapper（ページ全体）
	----------------------------------------------------*/
	#wrapper {
		width:auto;
		clear:both;
		overflow:hidden;
		z-index:0;
	}

	/*----------------------------------------------------
		#contents（メインとサイド）
	----------------------------------------------------*/

	section {
		clear:both;
		overflow:hidden;
		width:auto;
		margin:0 5px 25px 5px;
	}
	section.rank {
		clear:both;
		overflow:hidden;
		width:auto;
		margin:0 auto 40px auto;
		background-color:#26C9FF;
	}
	section.rank .in {
		width:auto;
		margin:0 auto;
		padding:15px 5px;
	}


	/* リンク
	----------------------------------------------------*/
	/* ベーススタイル */
	a {
		color:#0073BE;
	}
	a:hover {
		text-decoration:none;
	}
	a img:hover {
		opacity: 0.8;
		filter: alpha(opacity=80);
		-moz-opacity: 0.8;
	}


	/* ----------------------------------------------------
		■ヘッダー
	---------------------------------------------------- */
	header {
		clear:both;
		width:auto;
		margin:0 auto;
	}
	.mainVisual {
		background:none;
		background-size:contain;
		text-align:left;
		margin-bottom:10px;
		height:auto;
	}
	.mainVisual h1 {
		color:#FFF;
		font-size:10px;
		font-weight:normal;
		margin:0 auto;
		width:auto;
		line-height:1;
		padding-top:3px;
		background-color:#0AC8FF;
	}
	.mainVisual .sp {
		display: inherit;
	}
	.mainVisual .sp img {
		width:100%;
	}
	/* なぜ？
	---------------------------------------------------- */
	.what .base {
		background-image:none;
		background-color:#4D8967;
		border:#DC952A solid 4px;
		color:#fff;
		padding:10px;
		clear:both;
		overflow:hidden;
		height:auto;
	}
	.what .inner {
		float:none;
		width:auto;
		margin:0;
	}
	.what .inner p {
		margin-bottom:15px;
	}



	/* ポイント
	---------------------------------------------------- */
	.point .box_t {
		width:291px;
		float:none;
		background:url(../img/uploads/demo3_what_bgtop.gif) no-repeat 0 0;
		margin:0 auto 10px;
	}
	.point .box_b {
		background:url(../img/uploads/demo3_what_bgbt.gif) no-repeat 0 100%;
		padding:20px 20px 30px 20px ;
	}
	.point .img {
		text-align:center;
		margin-bottom:15px;
	}
	.point h3 {
		margin-bottom:10px;
		font-size:16px;
		color:#FB6A95;
	}

	/* ランク
	---------------------------------------------------- */
	section.rank .rankbox {
		background-image:none;
		background-color:#fff;
		border-top:#92E5FF solid 5px;
		border-left:#92E5FF solid 5px;
		border-right:#92E5FF solid 5px;
		padding:10px;
		clear:both;
		overflow:hidden;
	}
	section.rank .rankbox_out {
		background: url(../img/uploads/demo3_rank_bg_b.gif) no-repeat 0 100%;
		padding-bottom:16px;
		margin-bottom:30px;
	}
	section.rank .caparea {
		float:none;
		width:auto;
		margin-bottom:15px;
	}
	section.rank .caparea img {
		width:100%;
	}
	section.rank .txtarea {
		float:none;
		width:auto;
		margin-bottom:15px;
	}
	section.rank .txtarea .ttlarea {
		background:url(../img/uploads/demo3_rank_ttl_bg.gif) no-repeat 0 100%;
		background-size:contain;
		clear:both;
		overflow:hidden;
		padding:0 0 28px;
		margin-bottom:15px;
	}
	section.rank .txtarea .ttlarea .mark {
		float:none;
		width:auto;
		text-align:center;
	}
	section.rank .txtarea .ttlarea .sitename {
		float:none;
		width:auto;
		text-align:center;
	}
	section.rank .txtarea .ttlarea h3 {
		font-size:25px;
		font-weight:bold;
	}
	section.rank .txtarea .ttlarea p {
		font-size:14px;
		color:#666666;
		margin:20px 0 15px;
	}
	section.rank .txtarea .dis {
		margin-bottom:15px;
	}
	section.rank .txtarea table {
		border:#eaeaea solid 1px;
		border-collapse:collapse;
		text-align:center;
		width:100%;
	}
	section.rank .txtarea table th {
		border:#eaeaea solid 1px;
		border-collapse:collapse;
		background-color:#8FE5FF;
		font-weight:bold;
		vertical-align:middle;
		width:33%;
		padding:7px;
	}
	section.rank .txtarea table td {
		border:#eaeaea solid 1px;
		border-collapse:collapse;
		padding:7px;
		vertical-align:middle;
	}
	section.rank .txtarea .con_bt {
		display:none;
	}
	section.rank .txtarea .con_bt_sp {
		margin-top:15px;
		text-align:center;
		font-size:130%;
		font-weight:bold;
		color: #ffffff;
		padding: 15px 21px;
		background: -moz-linear-gradient(
			top,
			#ffae00 0%,
			#ff9501 50%,
			#ff6d0c 50%,
			#ffaa01);
		background: -webkit-gradient(
			linear, left top, left bottom,
			from(#ffae00),
			color-stop(0.50, #ff9501),
			color-stop(0.50, #ff6d0c),
			to(#ffaa01));
		-moz-border-radius: 3px;
		-webkit-border-radius: 3px;
		border-radius: 3px;
		border: 1px solid #ff6d0c;
		-moz-box-shadow:
			0px 1px 3px rgba(000,000,000,0.5),
			inset 0px 0px 5px rgba(255,255,255,0.6);
		-webkit-box-shadow:
			0px 1px 3px rgba(000,000,000,0.5),
			inset 0px 0px 5px rgba(255,255,255,0.6);
		box-shadow:
			0px 1px 3px rgba(000,000,000,0.5),
			inset 0px 0px 5px rgba(255,255,255,0.6);
		text-shadow:
			1px 1px 1px rgba(0,0,0,0.8),
			0px 1px 0px rgba(255,255,255,0.3);
	}
	section.rank .txtarea .con_bt img {
		width:100%;
	}
	section.rank .rev {
		clear:both;
		overflow:hidden;
	}
	section.rank .rev .inner {
		border-left:#FFEEF3 solid 3px;
		border-right:#FFEEF3 solid 3px;
		border-bottom:#FFEEF3 solid 3px;
		padding:7px;
		clear:both;
		overflow:hidden;
	}
	section.rank .rev .inner .imgarea {
		float:none;
		text-align:center;
		width:auto;
		margin-right:0;
		margin-bottom:15px;
	}
	section.rank .rev .inner .textarea {
		float:none;
		width:auto;
	}

	/*流れ
	----------------------------------------------------*/
	section.flow dl {
		width:auto;
		margin:0 auto 20px;
		border-bottom:#FD6894 solid 1px;
	}
	section.flow dt {
		background:#FD6894;
		padding:14px 20px 10px 20px;
		color:#FFF;
		font-weight:bold;
		font-size:15px;
	}
	section.flow dt span {
		background-color:#FFEFF4;
		color:#FD6894;
		font-size:18px;
		padding:0 4px;
		margin-right:10px;
	}

	section.flow dd {
		border-left:#FD6894 solid 1px;
		border-right:#FD6894 solid 1px;
		padding:15px 20px 10px 20px ;
		box-sizing: content-box;
		clear:both;
		overflow:hidden;
		background:none;
	}
	section.flow dd img {
		float:left;
		margin:0 20px 5px 0;
	}


	section.flow dd.dsip {
		width:auto;
	}
	section.flow dd.dsip img {
		width:auto;
	}

	/*----------------------------------------------------
		#main（メインコンテンツ）
	----------------------------------------------------*/

	h2 {
		margin-bottom:15px;
	}
	h2 img {
		width:100%;
	}













	/*----------------------------------------------------
		footer
	----------------------------------------------------*/
	footer {
		overflow:hidden;
		clear:both;
		padding-top:30px;
		background:#dedede;
		text-align:center;
	}
	footer .pagetop {
		text-align:right;
		margin-bottom:10px;
	}
	footer .copyarea {
		padding:20px 0;
	}

}