@charset "utf-8"; 

/* -- http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain) -- */

html, body, div, span, applet, object, iframe, 
h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, 
del, dfn, em, font, ins, kbd, q, s, samp, 
small, strike, strong, sub, sup, tt, var, 
dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table.table, caption, tbody, tfoot, thead, tr, th, td, 
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary, 
time, mark, audio, video {
	margin: 0; 
	outline: 0; 
	padding: 0; 
	border: 0; 
	font-size: 100%; 
	font: inherit; 
	vertical-align: baseline; 
	}

/* -- HTML5 display-role reset for older browsers -- */

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
	display: block; 
	}

ol, ul {
	list-style: none; 
	}

blockquote, q {
	quotes: none; 
	}

blockquote:before, blockquote:after, q:before, q:after {
	content: none; 
	}

table {
	border-collapse: separate; 
	border-spacing: 0; 
	}

caption, th, td {
	font-weight: normal; 
	text-align: left; 
	}

body {
	color: #a3a3a3; 
	font-size: small; 
	font-family:verdana,"ヒラギノ丸ゴ ProN W4","Hiragino Maru Gothic ProN","メイリオ","Meiryo","ＭＳ Ｐゴシック","MS PGothic",Sans-Serif; 
	line-height: 1.5; 
	-webkit-text-size-adjust: none; 
	background: #221815; 
	}

a {
	color: #DC143C; 
	text-decoration: none; 
	}

a:hover {
	color: #006699; 
	}

a:hover img {
	opacity: 0.8;
	filter: alpha(opacity=80);
	-ms-filter: "alpha( opacity=80 )";
}

a:active, a:focus {
	outline: 0; 
	}

#Wrapper {
	margin: 0 auto; 
	padding: 0 1%; 
	width: 98%; 
	position: relative; 
	background: #221815; 
	}

.Inner {
	margin: 0 auto; 
	width: 100%; 
	}

#Header {
	height: 110px; 
	}

#Header h1 {
	padding: 5px 0 10px 20px; 
	font-size: 5px; 
	font-weight: normal; 
	color: #221815; 
	}

.Logo {
	float: left; 
	margin-left: 20px; 
	}

.Logo span {
	display: block; 
	}

.Logo {
	margin-top: 6px; 
	margin-bottom: 25px; 
	color: #00a0e9; 
	font-size: 22px; 
	font-weight: bold; 
	}

.Logo span {
	color: #555; 
	font-size: 0.5em; 
	font-weight: normal; 
	}

#MainBanner {
	margin: 17px auto; 
	padding: 0; 
	width: 100%; 
	position: relative; 
	line-height: 0; 
	}

#MainBanner img {
	max-width: 100%; 
	height: auto; 
	border: 4px solid #555; 
	}

.Slogan {
	position: absolute; 
	max-width: 100%; 
	height: auto; 
	bottom: 10px; 
	left: 10px; 
	padding: 5px 10px; 
	line-height: 1.4; 
	background-color: rgba(0,0,0,0.0); 
	color: #f1f1f1; 
	}

.Slogan h2 {
	padding-bottom: 5px; 
	font-size: 20px; 
	color: #f1f1f1; 
	}

.GridWrapper {
	padding-bottom: 20px; 
	overflow: hidden; 
	height: 1%; 
	} 
	
.Grid {
	float: left; 
	border-radius: 5px; 
	background: #221815; 
	}

.Box {
	margin: 0 5px; 
	padding: 10px; 
	border: 1px solid #555; 
	}

.Box img {
	max-width: 100%; 
	height: auto; 
	border: 4px solid #555; 
	}

.Box h3 {
	padding: 10px 0 10px; 
	font-size: 105%; 
	font-weight: bold; 
	color: #D7D7D7; 
	}

.Box h3, .Box p {
	text-align: left; 
	}

.Box p.ReadMore {
	padding: 10px 5px 5px; 
	text-align: right; 
	}

section.Contents article {
	padding: 20px; 
	margin-bottom: 20px; 
	border: 1px solid #555; 
	overflow: hidden; 
	}

section.Contents article ul li{
	padding-left: 30px;
	padding-right: 50px;
	list-style-type: square;
	list-style-position: inside; 
	font-size: 90%; 
}

section.Contents article span.Price {
	font-size: 120%; 
	font-weight: bold; 
	color: #ffd700; 
	}

section.Contents article span.Price a {
	color: #ffd700; 
	}

section.Contents article span.Notice {
	font-size: 80%; 
	}

section.Contents article span a {
	color: #a3a3a3; 
	}

section.Contents article span a:hover {
	color: #DC143C; 
	}

section.Contents article p.ReadMore {
	padding: 10px 5px 5px; 
	text-align: right; 
	}

section.Contents article.iFrame_Box {
	padding: 20px; 
	text-align: center; 
	}

section.Contents article.PageTop {
	padding: 0px; 
	text-align: center; 
	border: 0px solid #555; 
	}

section.Contents article.PageTop a {
	color: #a3a3a3; 
	}

section.Contents article.PageTop a:hover {
	color: #DC143C; 
	}

* html section.Contents article {
	height: 1%; 
	}

section.Contents p {
	margin-bottom: 5px; 
	}

h3.Heading {
	font-size: 105%; 
	font-weight: bold; 
	padding: 0 20px; 
	line-height: 36px; 
	color: #D7D7D7; 
	background: #221815; 
	}

#SideMenu h3.Heading {
	display: none; 
	}

section#QuickPlan h4 {
	list-style-type: none;
	height: 30px;
	line-height: 30px;
	color: #f3f3f3;
	background-color: #DC143C;
	font-size: 14px;
	font-weight: bold;
	text-indent: 20px;
	margin-bottom: 20px;
	display: block; 
	margin-left: 20px; 
	margin-right: 20px; 
	}

section#BasicPlan h4 {
	list-style-type: none;
	height: 30px;
	line-height: 30px;
	color: #f3f3f3;
	background-color: #f7931e;
	font-size: 14px;
	font-weight: bold;
	text-indent: 20px;
	margin-bottom: 20px;
	display: block; 
	margin-left: 20px; 
	margin-right: 20px; 
	}

section#PremiumPlan h4 {
	list-style-type: none;
	height: 30px;
	line-height: 30px;
	color: #f3f3f3;
	background-color: #0071bc;
	font-size: 14px;
	font-weight: bold;
	text-indent: 20px;
	margin-bottom: 20px;
	display: block; 
	margin-left: 20px; 
	margin-right: 20px; 
	}

h4.SiteMap {
	list-style-type: none;
	height: 30px;
	line-height: 30px;
	color: #f3f3f3;
	background-color: #0071bc;
	font-size: 14px;
	font-weight: bold;
	text-indent: 20px;
	display: block; 
	margin-left: 20px; 
	margin-right: 20px; 
	}

section.Contents img {
	max-width: 90%; 
	height: auto; 
	}

.AlignLeft {
	float: left; 
	clear: left; 
	margin: 3px 10px 10px 0; 
	}

.AlignRight {
	float: right; 
	clear: right; 
	margin: 3px 0 10px 10px; 
	}

.AlignCenter {
	display: block; 
	margin-left: auto; 
	margin-right: auto; 
	margin-bottom: 30px; 
	}

#Gallery .Grid img, .Border, ul.List img {
	border: 4px solid #555; 
	}

table {
	border-collapse: collapse; 
	margin: 5px auto 15px auto; 
	}

table td {
	border-collapse: collapse;
	background: #221815; 
	text-align: left; 
	padding: 8px 30px 8px 20px; 
	border: 1px solid #999; 
	line-height: 20px; 
	}

table td a {
	color: #a3a3a3; 
	}

table td a:hover {
	color: #DC143C; 
	}

table th {
	background: #221815; 
	text-align: right; 
	padding: 8px 20px 8px 30px; 
	white-space: nowrap; 
	color: #777; 
	border: 1px solid #999; 
	font-size: 13px; 
	font-weight: bold; 
	letter-spacing: 1px; 
	background-repeat: repeat-x; 
	background-position: top; 
	}

table.PriceBox td { 
	border: none; 
	padding: 3px 10px 3px 30px; 
	font-weight: bold; 
	font-size: 100%; 
	color: #ffd700; 
	}

table.PriceBox th {
	border: none; 
	padding: 3px 30px 3px 10px;  
	text-align: left; 
	font-size: 100%; 
	color: #ffd700; 
	}

table.PriceBox .PriceNotice {
	font-size: 85%; 
	color: #a3a3a3; 
	}

#SideMenu ul {
	padding: 10px; 
	}

#SideMenu li {
	margin-bottom: 10px; 
	padding-bottom: 10px; 
	list-style: none; 
	border-bottom: 1px dashed #555; 
	}

#SideMenu li:last-child {
	border: 0; 
	margin-bottom: 0px; 
	}

#SideMenu li a {
	display: block; 
	color: #a3a3a3;
	}

#SideMenu li.Active a, #SideMenu li a:hover {
	color: #DC143C;
	}

#SideMenu ul.List li {
	clear: both; 
	margin-bottom: 5px; 
	padding: 5px 0; 
	overflow: hidden; 
	border: 0; 
	}

ul.List li {
	height: 1%; 
	}

ul.List li img {
	float: left; 
	margin-right: 10px; 
	}

ul.List li {
	font-size: 12px; 
	line-height: 1.35; 
	}

ul.PriceNotice li {
	font-size: 80%; 
	line-height: 1.5; 
	margin-left: 50px;
	}

#Footer {
	clear: both; 
	overflow: hidden; 
	padding: 10px 0 0 0; 
	background: #f3f3f3; 
	}

* html #Footer {
	height: 1%; 
	}

#Footer .Grid {
	padding: 20px 0 5px 0; 
	margin: 0; 
	background: transparent; 
	}

#Footer #Info .Logo {
	float: none; 
	}

#Footer .Logo {
	font-size: 18px; 
	}

ul.FootNavi {
	float: left; 
	width: 620px; 
	padding: 22px 0 0 20px; 
	}

ul.FootNavi li {
	float: left; 
	margin-bottom: 10px; 
	padding: 0 8px 0 8px; 
	font-size: 11px; 	
	border-left: 1px solid #b6b6b6; 
	}

#Footer a {
	color: #555; 
	}

#Footer a:hover {
	color: #DC143C; 
	}

address {
	clear: both; 
	padding: 5px; 
	text-align: center; 
	font-style: normal; 
	font-size: 10px; 
	color: #555; 
	background: #f3f3f3; 
	}

@media only screen and (min-width: 960px) {
	#Header,#Wrapper,.Inner {
		width: 960px; 
		padding: 0; 
		margin: 0 auto; 
		}
	
	#Wrapper {
		padding-bottom: 20px; 
		}
	
	nav#MainNavi {
		clear: both; 
		overflow: hidden; 
		position: relative; background: #221815; 
		}
	
	nav#MainNavi .Inner {
		width: 932px; 
		padding: 0 14px; 
		}

	nav#MainNavi ul li {
		float: left; 
		position: relative; 
		}

	nav#MainNavi li.Last {
		border-right: 1px solid #ebebeb; 
		}

	nav#MainNavi ul li a {
		display: block; 
		text-align: center; 
		float: left; 
		font-size: 13px; 
		width: 154px; 
		height: 45px; 
		padding-top: 15px; 
		color: #555; 
		background: #f1f1f1; 
		border-left: 1px solid #ebebeb; 
		}

	nav#MainNavi ul li a span, nav#MainNavi ul li a strong {
		display: block; 
		}

	nav#MainNavi ul li a span {
		color: #cdcdcd; 
		font-size: 10px; 
		}

	nav div.Panel {
		display: block !important; 
		float: left; 
		}

	a#Menu {
		display: none; 
		}

	nav#MainNavi li.Active a, nav#MainNavi li a:hover {
		color: #DC143C; 
		background: #eee; 
		padding-top: 15px; 
		}
	
	#MainBanner {
		margin-left: 15px; 
		}

	#SubPage #MainBanner {
		margin: 15px auto; 
		}
	
	#MainContents {
		float: right; 
		width: 667px; 
		padding-right: 15px; 
		}
	
	#SideMenu {
		float: left; 
		width: 245px; 
		padding: 15px 0 0 15px; 
		overflow: hidden; 
		}
	
	#SideMenu article {
		padding: 7px; 
		margin-bottom: 20px; 
		border: 1px solid #555; 
		overflow: hidden; 
		}
	
	.GridWrapper {
		width: 960px; 
		margin: 0 0 0 -10px; 
		}
	
	#Gallery article {
		padding: 10px 0 10px 10px; 
		}
	
	.Grid {
		float: left; 
		width: 300px; 
		margin-left: 20px; 
		}
	
	#SubPage .Grid {
		width: auto; 
		}
	
	#Gallery .Grid {
		width: auto; 
		margin: 10px 0 2px 10px; 
		}
	}

@media only screen and (max-width:959px) {
	*{
		-webkit-box-sizing: border-box; 
		-moz-box-sizing: border-box; 
		-o-box-sizing: border-box; 
		-ms-box-sizing: border-box; 
		box-sizing: border-box; 
		}
	
	nav#MainNavi {
		clear: both; 
		width: 100%; 
		margin: 0 auto; 
		padding: 0; 
		background: -webkit-gradient(linear, left top, left bottom, color-stop(1, #f5f5f5), color-stop(0.5, #f0f0f0), color-stop(0.00, #f7f7f7)); 
		background: -webkit-linear-gradient(top, #f7f7f7 0%, #f0f0f0 50%, #f5f5f5 100%); 
		background: -moz-linear-gradient(top, #f7f7f7 0%, #f0f0f0 50%, #f5f5f5 100%); 
		background: -o-linear-gradient(top, #f7f7f7 0%, #f0f0f0 50%, #f5f5f5 100%); 
		background: -ms-linear-gradient(top, #f7f7f7 0%, #f0f0f0 50%, #f5f5f5 100%); 
		background: linear-gradient(top, #f7f7f7 0%, #f0f0f0 50%, #f5f5f5 100%); 
		border: 1px solid #e4e4e4; 
		}

	nav#MainNavi a.Menu {
		width: 100%; 
		display: block; 
		height: 40px; 
		line-height: 40px; 
		font-weight: bold; 
		text-align: center; 
		}

	nav#MainNavi a#Menu span {
		padding-left: 0; 
		}

	nav#MainNavi a.Menu span:before {
		content: "▼ "; 
		}

	nav#MainNavi a.Menu span:after {
		content: " ▼"; 
		}

	nav#MainNavi a.MenuOpen span:before {
		content: "△ "; 
		}

	nav#MainNavi a.MenuOpen span:after {
		content: " △"; 
		}

	nav#MainNavi a#Menu:hover {
		cursor: pointer; 
		}

	nav .Panel {
		display: none; 
		width: 100%; 
		position: relative; 
		right: 0; 
		top: 0; 
		z-index: 1; 
		}

	nav#MainNavi ul li {
		float: none; 
		clear: both; 
		width: 100%; 
		height: auto;  
		line-height: 1.2; 
		}

	nav#MainNavi ul li a, nav#MainNavi ul li.current-menu-item li a {
		display: block; 
		padding: 20px 0; 
		text-align: center; 
		border-bottom: 1px dashed #ccc; 
		color: #555; 
		}
	
	nav#MainNavi ul li a span {
		padding-left: 10px; 
		}
	
	nav#MainNavi ul li:first-child a {
		border-top: 1px solid #e4e4e4; 
		}
	
	nav#MainNavi ul li:last-child a {
		border: 0; 
		}
	
	nav#MainNavi ul li.Active a, nav#MainNavi ul li a:hover {
		color: #DC143C; 
		}

	nav div.Panel {
		float: none; 
		}
	
	#SubPage #MainBanner {
		max-width: 668px; 
		}
	
	#SideMenu {
		padding-bottom: 30px; 
		}
	
	#SideMenu article {
		padding: 7px 0; 
		}
	
	#Footer .Grid, #Footer ul.FootNavi {
		float: none; 
		width: 100%; 
		text-align: center; 
		}

	ul.FootNavi li {
		float: none; 
		display: inline-block; 
		}
	
	.Grid {
		width: 32%; 
		margin: 10px 0 0 1%; 
		}
	
	#Gallery .Grid {
		float: left; 
		width: 31%; 
		margin: 0 0 0 1%; 
		}
	
	#Footer .Grid img {
		float: none; 
		}

	#Footer .Grid p {
		display: block; 
		}
	
	#Footer.Logo {
		width: 100%; 
		float: none; 
		text-align: center;
		}

	aside p {
		text-align: center; 
		}

	ul.PriceNotice li { 
		margin-left: 120px;
		}
	}

@media only screen and (max-width:640px) {
	#Header {
		height: auto; 
		padding-bottom: 20px; 
		}
	
	#Header h1, .Logo {
		text-align: center; 
		}
	
	.Logo {
		clear: both; 
		width: 100%; 
		float: none; 
		margin: 0; 
		}
	
	.Box img {
		float: left; 
		margin-right: 5px; 
		}
	
	.Box h3 {
		padding-top: 0; 
		}

	.AlignLeft, .AlignRight {
		float: none; 
		display: block; 
		margin: 0 auto 10px; 
		}
	
	#Gallery .Grid {
		float: left; 
		}

	aside p {
		text-align: center; 
		}

	table td, table th {
   	     	width: 100%;
   	     	display: block;
		text-align: left;
		}

	ul.PriceNotice li { 
		margin-left: 20px;
		}
	}


@media only screen and (max-width:480px) {
	.Grid {
		width: 100%; 
		}

	.Box img {
		max-width: 100px; 
		}

	#MainBanner h2, #MainBanner p {
		font-size: 80%; 
		}

	aside p {
		text-align: center; 
		}

	table td, table th {
   	     	width: 100%;
   	     	display: block;
		text-align: left;
		}

	ul.PriceNotice li {
		margin-left: 5px;
		}
	}