@charset "utf-8";
/* CSS Document */

/*------------------------------------------------------------
	RESET
------------------------------------------------------------*/
* {
    -webkit-appearance: none;
}

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, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, figure {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 1em;
}
body, table, input, textarea, select, option {
	font-family:'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', Meiryo UI, 'ＭＳ Ｐゴシック';
	font-size: 1em;
}
article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary {
	display: block;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
:focus {
	outline: 0;
}
ins {
	text-decoration: none;
}
del {
	text-decoration: line-through;
}

img{
	max-width:100%;
	height:auto;
	vertical-align:middle;
}

/*------------------------------------------------------------
	BASIC
------------------------------------------------------------*/
body{
	font-size:12px;
	color:#222;
	line-height:20px;
	-webkit-text-size-adjust: none;
}

a{
	text-decoration:none;
	color:#5FC0E9;
}

.alignright{
	float:right;
	margin-left:2em;
	margin-bottom:1em;
}

.alignleft{
	float:left;
	margin-right:2em;
	margin-bottom:1em;
}

.aligncenter{
	margin:0 auto 2em;
	display:block;
}

.red{
	color:#f00;
}

/*------------------------------------------------------------
	HEADER
------------------------------------------------------------*/
header{
	background-color:#6CF;
	padding:2%;
}

header h1{
	font-size:10px;
	color:#fff;
	font-weight:normal;
}

#mainvisual{
	margin-bottom:5%;
}

#page_head{
}

.header_left{
	float:left;
	width:52%;
	padding:0 2%;
}

.header_right{
	float:right;
	width:40%;
	padding:0 2%;
	font-weight:bold;
	text-align:right;
}



/*------------------------------------------------------------
	CONTENT
------------------------------------------------------------*/
#content{
	width:96%;
	padding:0 2%;
}

#content section{
	border:1px solid #5FC0E9;
	padding:3%;
	border-radius:2px;
	margin-bottom:5%;
}

#content h2{
	font-size:18px;
	color:#009E96;
	padding-bottom:0.5em;
	border-bottom:1px dotted #AFE0F4;
	margin-bottom:0.5em;
}

#content h3{
	font-size:16px;
	color:#009E96;
	margin-bottom:0.5em;
}

#content h3.faqtitle{
	font-size:14px;
	background:#009E96;
	color:#fff;
	padding:2% 5%;
	font-weight:bold;
	margin-bottom:0.5em;
}


#content .imgbox{
	width:34%;
	float:right;
	margin-left:5%;
	margin-bottom:5%;
}

#content .imgbox img{
	width:94%;
	height:auto;
	padding:3%;
	background:#fff;
	border:1px solid #ddd;
}

#content h2.shichiya{
	padding-left:25px;
	background:url(../img/listmark_shichiya.png) no-repeat left 2px / 15px 15px;
}

#content h2.info{
	padding-left:25px;
	background:url(../img/listmark_info.png) no-repeat left 2px / 15px 15px;
}

#content h2.items{
	padding-left:25px;
	background:url(../img/listmark_items.png) no-repeat left 2px / 15px 15px;
}

#content h2.faq{
	padding-left:25px;
	background:url(../img/listmark_faq.png) no-repeat left 2px / 15px 15px;
}

#content h2.shop{
	padding-left:25px;
	background:url(../img/listmark_shop.png) no-repeat left 2px / 15px 15px;
}

#content h2.contact{
	padding-left:25px;
	background:url(../img/listmark_contact.png) no-repeat left 2px / 15px 15px;
}


#content .contour{
	border-top:1px dotted #ddd;
	margin-bottom:2em;
}

#content h4{
	margin-top:1.2em;
	font-size:16px;
	color:#963;
	float:left;
	margin-left:1em;
}

#content .chushaku{
	color:#C36;
	font-size:10px;
}

#content ul{
	margin:1em 0;
}

#content ul li{
	background:url(../img/gold_ball.png) no-repeat left center / 4px 4px;
	padding-left:14px;
}

#content .itemcat{
	margin-bottom:2em;
}

#content span.right{
	float:right;
	padding:2% 5%;
	background:#6cf;
}

#content span.right a{
	color:#fff;
}



/*------------------------------------------------------------
	SYSTEM INFO
------------------------------------------------------------*/
#step{
	padding-bottom:2em;
	background:url(../img/arrow_down.png) no-repeat center bottom / 15px 10px;
}

#step_last{
	padding-bottom:2em;
}


.step{
	margin-top:1em;
	padding:4px 0;
	font-weight:bold;
	float:left;
}


.step_number{
	background:#009E96;
	color:#fff;
	font-weight:bold;
	padding:4px;
	width:20px;
	height:20px;
	border-radius:14px;
	margin-left:0.5em;
	display:inline-block;
	text-align:center;
}



/*------------------------------------------------------------
	Purchase
------------------------------------------------------------*/
#purchase{
	padding-bottom:0.5em;
	border-bottom:1px dotted #ddd;
	margin-bottom:0.5em;
}

#purchase .image{
	width:30%;
	float:left;
}

#purchase .text{
	width:65%;
	float:right;
}

#purchase .image img{
	width:94%;
	height:auto;
	padding:3%;
	background:#fff;
	border:1px solid #ddd;
}


/*------------------------------------------------------------
	Q&A
------------------------------------------------------------*/
.qaset{
	padding-bottom:1em;
	border-bottom:1px dotted #ddd;
	margin-bottom:1em;
}


.quastion{
	padding:2% 2% 2% 0;
	color:#111;
	font-weight:bold;
}

.quastion p:before{
		content:'Q. ';
		font-weight:bold;
		color:#009E96;
}

.answer{
	padding:2% 2% 2% 0;
}

.answer p{
	text-indent:-1.5em;
	margin-left:1.5em;
}

	

.answer p:before{
	content:'A. ';
	color:#C36;
	font-weight:bold;
}


/*------------------------------------------------------------
	SHOP
------------------------------------------------------------*/
#profile{
	width:100%;
	border-collapse:collapse;
	border:1px solid #ddd;
}

#profile td{
	padding:2% 3%;
	vertical-align:top;
}

#profile th{
	padding:2% 3%;
	vertical-align:top;
	color:#3497c2;
}

.bgthl1{
	background:#dcecf5
}

.bgthl2{
	background:#e3f0f7;
}

.bgtdr1{
	background:#f7fbfd;
}

#googlemap{
width:100%;
height:320px;
margin-bottom:1em;
}

#googlemap label { width: auto; display: inline; }
#googlemap img { max-width: none; max-height: none; }



/*------------------------------------------------------------
	RSS
------------------------------------------------------------*/
.rss{
	padding-top:3%;
}


#images{
	width:100%;
	margin:0 auto;
}

#images td{
}



#images .text{
	float:left;
	margin-left:5%;
	font-size:13px;
	line-height20px;
	display:block;
	width:70%;
	word-break: break-all;
}


#images img{
	border:1px solid #ddd;
	width:94%;
	height:94%;
	padding:3%;
	background:#fff;
}

#images .image{
	width:20%;
	float:left;
	display: block;
	text-align:left;
	margin-bottom:3%;
}

/*------------------------------------------------------------
	DROWER MENU
------------------------------------------------------------*/

#menu{
height:44px;
position:relative;
background:#6CF;
margin-bottom:5%;
}


#menubox{
	position:absolute;
	top:44px;
	left:0;
	z-index:999;
	width:100%;
	height:auto;
	display:none;
}

#menubtn{
	margin-left:35px;
	display:block;
	cursor:pointer;
	font-size:15px;
	letter-spacing:2px;
	line-height:44px;
	font-weight:bold;
	text-align:left;
	color:#fff;
}

#menubtn img{
position:absolute;
top:15px;
left:15px;
}

#menu ul{
background:url(../img/listmenu_bg.png) repeat;
}



#menu li{
	position:relative;
	font-size:14px;
	color:#fff;
	font-weight:bold;
	display:block;
	height:44px;
	line-height:44px;
	text-align:left;
	padding-left:35px;
	border-top:1px solid #666;
	border-bottom:1px solid #333;
}

#menu li a{
width:100%;
height:100%;
display:block;
color:#fff;
}


#menu li::after {
position: absolute;
top: 45%;
right: 20px;
display: block;
content: '';
width: 0;
height: 0;
border-style: solid;
border-width: 4px 0 4px 6px;
border-color: transparent transparent transparent #fff;
}

.menu1{ background:url(../img/listmark_menu1.png) no-repeat 10px 14px / 15px 15px; }
.menu2{ background:url(../img/listmark_menu2.png) no-repeat 10px 14px / 15px 15px; }
.menu3{ background:url(../img/listmark_menu3.png) no-repeat 10px 14px / 15px 15px; }
.menu4{ background:url(../img/listmark_menu4.png) no-repeat 10px 14px / 15px 15px; }
.menu5{ background:url(../img/listmark_menu5.png) no-repeat 10px 14px / 15px 15px; }
.menu6{ background:url(../img/listmark_menu6.png) no-repeat 10px 14px / 15px 15px; }


/*------------------------------------------------------------
	GOTOTOP
------------------------------------------------------------*/
.gototop{
	padding:3% 0;
	text-align:center;
	color:#5FC0E9;
	border:3px solid #5FC0E9;
	margin:1em 0;
	font-size:16px;
	font-weight:bold;
	display:block;
	border-radius:5px;
}

.gototop a{
	display:block;
}


/*------------------------------------------------------------
	CONTACT
------------------------------------------------------------*/
input {
	width:94%;
	border-radius:0;
}

textarea {
	width:94%;
	height:80px;
	border-radius:0;
}

input#submit_btn{
	width:30%;
	margin:1em 9%;
}

#confirm{
	border-collapse:collapse;
	border:1px solid #ddd;
	width:100%;
	margin-bottom:1em;
}

#confirm th{
	border:1px solid #ddd;
	border-collapse:collapse;
	padding:2% 5%;
	text-align:left;
	font-weight:normal;
}

#confirm td{
	border:1px solid #ddd;
	border-collapse:collapse;
	padding:2% 5%;
}





/*------------------------------------------------------------
	FOOTER
------------------------------------------------------------*/
#footer{
	padding:5% 0;
	border-top:3px solid #6cf;
	text-align:center;
}

.telnumber{
	color:#f00;
	font-size:20px;
	letter-spacing:1px;
	line-height:2;
	font-weight:bold;
}

.telnumber a{
	color:#f00;
}



#copy{
	background:#333;
	color:#fff;
	font-size:8px;
	text-align:center;
	padding:2% 0;
	line-height:12px;
}

.attention{
	font-size:10px;
	color:#666;
	line-height:12px;
}


/*------------------------------------------------------------
	CLEARFIX
------------------------------------------------------------*/
.clear {
    clear: both;
}