@charset "utf-8";

/* =Reset default browser CSS.
Based on work by Eric Meyer: http://meyerweb.com/eric/tools/css/reset/index.html
-------------------------------------------------------------- */
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, gdl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {border: 0;font-family: inherit;font-size: 100%;font-style: inherit;font-weight: inherit;margin: 0;outline: 0;padding: 0;vertical-align: baseline;}
:focus {outline: 0;}

ol, ul {list-style: none;}
table {border-collapse: separate;border-spacing: 0;}
caption, th, td {font-weight: normal;text-align: left;}
blockquote:before, blockquote:after,q:before, q:after {content: "";}
blockquote, q {quotes: "" "";}
a img {border: 0;}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block;}

body{
font: 12px/1.5 "メイリオ","Meiryo",arial,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",Osaka,"ＭＳ Ｐゴシック","MS PGothic",Sans-Serif;
color:#000;
-webkit-text-size-adjust: none;
background:#fff;
}
img {
margin:0px;
padding:0px;
border:0px;
vertical-align: bottom;
}

/* リンク設定
------------------------------------------------------------*/
a{
margin:0;
padding:0;
text-decoration:none;
outline:0;
vertical-align:baseline;
background:transparent;
font-size:100%;
color:#000;
}

a:hover, a:active{
text-decoration:none;
outline: none;
color:#666;
}


/**** Clearfix ****/
nav .panel:after, nav#mainNav:after,  .bg:after,.post:after, ul.post li:after,nav#mainNav .inner:after{content:""; display: table;clear: both;}
nav .panel,nav#mainNav,.bg, .post, ul.post li,nav#mainNav .inner{zoom: 1;}


/* レイアウト
------------------------------------------------------------*/
#wrapper, .inner{
margin:0 auto;
width:950px;
}

#header{
	width: 950px;
	max-width: 950px;
	margin: 0 auto;
	padding:10px 0px 0px 0px;
	clear:both;
text-align:center;
}
#header .logo{
width:40%;
margin:0px 0px 0px 0px;
padding:0px 0px 0px 0px;
}


#contents{
float:left;
width:700px;
padding:25px 0px 50px 0px;
background:#fff;
font-size:13px;
line-height:150%;
}
#contents a{text-decoration:underline;}
#contents a:hover{text-decoration:underline;}

#contents a:hover img {
	-moz-opacity:0.70;/*FF*/
	filter:alpha(opacity=70); /*IE*/
	opacity:0.70;
}
#contents a:active img {
	-moz-opacity:0.70;/*FF*/
	filter:alpha(opacity=70); /*IE*/
	opacity:0.70;
}
#contents img{
max-width:100%;
}
#contents strong{
font-weight:bolder !important;
font-size:120%;
}


#slide{
margin:2% 0px 0 0px;
padding:0px 0px 0px 0px;
width:100%;
}


#sidebar{
float:right;
width:220px;
padding:25px 0px 50px 0px;
background:#fff;
}
#sidebar a:hover img {
	-moz-opacity:0.70;/*FF*/
	filter:alpha(opacity=70); /*IE*/
	opacity:0.70;
}
#sidebar a:active img {
	-moz-opacity:0.70;/*FF*/
	filter:alpha(opacity=70); /*IE*/
	opacity:0.70;
}




#footer{
clear:both;
width:100%;
margin:0 0 0 0;
padding:10px 0 10px 0;
font-size:90%;
text-align:center;
background:#fff;
color:#000 !important;
border-top:1px solid #000;
} 



/* ヘッダー
*****************************************************/

/* サイト説明文
----------------------------------*/
h1{
padding:2px 0px 0px 0px;
margin:0px auto;
max-width:950px;
font-size:75%;
font-weight:normal;
text-align:left;
color:#999;
}


/* ロゴと看板
----------------------------------*/
#header ul{
margin:0px 0px 0px 0px;
padding:0px 0px 0px 0px;
}
#header li{
list-style:none;
float:left;
margin:0px 0px 0px 0px;
padding:0px 0px 0px 0px;
}
#header img{
width:100%;
}


/* メイン画像
----------------------------------*/
#mainimg{
clear:both;
margin:10px 0px 0px 0px;
line-height:0;
text-align:center;
z-index:0;
background:url(./images/back-main.png);
}
.mainimg_cat{
width:100%;
margin:0px;
padding:0px;
}


.main-price{
position:relative;
max-width:100%;
height:auto;
bottom:10px;
left:10px;
padding:5px 10px;
line-height:1.4;
z-index:100;
color:#a90000;
background:url(./images/main-price.jpg) left top no-repeat;
}

.main-price .slogan{
left:auto;
right:10px;
}

.main-price p{
padding-bottom:5px;
font-size:20px;
}




.post{
margin:0 0 20px 0;
padding:20px 10px 20px 20px;
border:1px solid red;
background: #fff;
}

.toppage h4{
margin:0 0 10px;
font-size:16px;
font-weight:normal;
color:#333;
}

.toppage{padding:10px 10px 20px 20px;}


/* 記事
*****************************************************/
.list{
padding:10px 0;
border-bottom:1px dashed #dcdcdc;
}

.list:last-child{border:0;}

.post .list p{padding:0;}

.list span{padding-left:10px;}


/* タイポグラフィ
*****************************************************/

.dateLabel{
text-align:right;
font-weight:bold;
color:#858585;
}


img.aligncenter {
display: block;
margin:0px auto;
}

img.alignright, img.alignleft{
margin: 10px 10px 15px 15px;
display:inline;
}

img.alignleft{margin:10px 15px 15px 10px;}

.alignright{float:right;}
.alignleft{float:left;}







/* 959px以下から 1カラム表示
------------------------------------------------------------*/
@media only screen and (max-width: 759px){
  #wrapper, .inner{width:100%;}

	#header{width:100%;padding:0 0%;}
	
	.contact{padding:10px 0 10px;}

  nav#mainNav{width:100%;}

	nav#mainNav ul{margin:0 auto;}
	nav#mainNav ul ul{padding:0;}

	nav div.panel{float:none;}
	
	#mainimg img{width:98%;height:auto;}

	#contents, #sidebar{clear:both;width:95%;float:none;margin:0 auto;padding:10px 0;	}
	
	.banner{width:100%;margin:0 auto;text-align:center;}
  p.banner img{width:100%;height:auto;}
	section.widget_search{text-align:center;}
	#calendar_wrap table{width:260px;}
	
	#footer li{margin-bottom:10px;}
	
}


/* 幅644px以下から ヘッダー等微調節
------------------------------------------------------------*/
@media only screen and (max-width: 644px){
	nav#mainNav{width:98%;}
	#header{text-align:center;background-image:none;}
	#header h2,.contact{float:none;}
	.contact{padding:0 0 20px;}
	.contact p{text-align:center;}
	#headerInfo{width:250px;margin:0 auto;}
	img.alignright, img.alignleft{display: block;	margin:5px auto;}
	.alignright,.alignleft{float:none;}
}




/* 追加
------------------------------------------------------------*/
#contents h2{
clear:both;
text-align:left;
color:#000;
font-weight:bolder;
width:auto;
font-size:140%;
margin:2px 0px 0px 0px;
padding:13px 0px 10px 10px;
letter-spacing:3px;
border-left:8px solid #59A1FF;
background:#F7F7F7;
}
#contents .title{
clear:both;
text-align:left;
color:#000;
font-weight:bolder;
width:auto;
font-size:130%;
margin:10px 0px 15px 0px;
letter-spacing:2px;
padding:2% 0% 2% 2%;
border-top:1px solid #000;
border-bottom:1px solid #000;
font-family: 'Century Gothic', "メイリオ","Meiryo";
}
#contents .title span{
padding:0px 0px 0px 10px;
font-size:80%;
font-weight:normal !important;
}

#contents .title2{
clear:both;
text-align:left;
color:#000;
font-weight:bolder;
width:auto;
font-size:120%;
margin:10px 0px 15px 0px;
letter-spacing:2px;
padding:1% 0% 1% 2%;
border-left:7px solid #000;
border-bottom:1px solid #000;
font-family: 'Century Gothic', "メイリオ","Meiryo";
}




#sidebar .title{
clear:both;
text-align:left;
color:#000;
font-weight:bolder;
width:auto;
font-size:115%;
margin:0px 0px 0px 0px;
padding:1% 0px 1% 2%;
border-top:1px solid #000;
border-bottom:1px solid #000;
font-family: 'Century Gothic', "メイリオ","Meiryo";
}
.postmail .title{
clear:both;
text-align:left;
color:#000;
font-weight:bolder;
width:auto;
font-size:130%;
margin:10px 0px 10px 0px;
letter-spacing:2px;
padding:11px 0px 8px 10px;
border-left:7px solid #59A1FF;
background:#F7F7F7;
}
#sidebar .title span{
font-size:80%;
color:#666;
padding:0px 0px 0px 5px;
font-weight:normal;
}


.pankuzu{
margin:0px 0px 0px 0px;
padding:0px 0px 0px 0px;
font-size:11px;
color:#666;
}
.pankuzu a      {color:#00BCFF;font-size:11px;text-decoration:none !importat;}
.pankuzu a:hover{color:#00BCFF;font-size:11px;text-decoration:underline;}

.attention{
width:100%;
margin:10px 0px 0px 0px;
padding:0px 0px 0px 0px;
clear:both;
}
.attention ul{
border:4px solid #ccc;
margin:0px 0px 0px 0px;
padding:7px 10px 10px 10px;
}
.attention li{
margin:0px 0px 0px 0px;
padding:9px 0px 9px 35px;
font-size:110%;
list-style:none;
border-bottom:1px dashed #ccc;
background:url(./images/back-attention.jpg) left top no-repeat;
}

.number{
width:100%;
margin:0px 0px 0px 0px;
padding:0px 0px 0px 0px;
clear:both;
}
.number ul{
border:4px solid #ccc;
margin:0px 0px 0px 0px;
padding:7px 10px 10px 10px;
}
.number li{
margin:0px 0px 0px 0px;
padding:6px 0px 6px 40px;
font-size:140%;
font-weight:bolder;
list-style:none;
letter-spacing:5px;
border-bottom:1px dashed #ccc;
}
.number li span{
padding:0px 0px 0px 10px;
font-size:80%;
font-weight:normal;
letter-spacing:0px;
}
.number .no1{
background:url(./images/back-no1.jpg) left top no-repeat;
}
.number .no2{
background:url(./images/back-no2.jpg) left top no-repeat;
}
.number .no3{
background:url(./images/back-no3.jpg) left top no-repeat;
}
.number .no4{
background:url(./images/back-no4.jpg) left top no-repeat;
}
.number .no5{
background:url(./images/back-no5.jpg) left top no-repeat;
}

.faq{
width:100%;
margin:0px 0px 0px 0px;
padding:5px 0px 0px 0px;
clear:both;
}
.faq ul{
margin:0px 0px 0px 0px;
padding:0px 0px 0px 0px;
}
.faq li{
margin:0px 0px 0px 0px;
list-style:none;
clear:both;
}
.faq .visitor{
margin:10px 0px 0px 0px;
padding:7px 0px 7px 85px;
background:url(./images/back-visitor.jpg) left top no-repeat;
font-size:130%;
border-bottom:1px dashed #ccc;
font-weight:bolder;
}
.faq .staff{
padding:10px 85px 5px 10px;
font-size:110%;
background:url(./images/back-staff.jpg) right top no-repeat;
}
.faq .question{
padding:7px 0px 7px 40px;
background:url(./images/back-question.jpg) left top no-repeat;
font-size:130%;
font-weight:bolder;
border-bottom:1px dashed #ccc;
}
.faq .answer{
padding:9px 0px 9px 40px;
font-size:110%;
background:url(./images/back-answer.jpg) left top no-repeat;
}
.faq .answer img{
float:right;
margin:0px 0px 5px 10px;
max-width:40%;
}





.table-border{
width:100%;
margin:0px 0px 0px 0px;
padding:0px 0px 0px 0px;
font-size:110%;
}
.table-border img{
width:100%;
}
.table-border table{
width:100%;
margin:0px 0px 3% 0px;
padding:0px 0px 0px 0px;
border-top:1px solid #000;
border-left:1px solid #000;
}
.table-border th{
margin:0px 0px 0px 0px;
padding:10px 0px 10px 0px;
border-bottom:1px solid #000;
border-right:1px solid #000;
font-size:100%;
font-weight:bolder;
text-align:center;
vertical-align:middle;
background:#ededed;
}
.table-border td{
margin:0px 0px 0px 0px;
padding:10px 10px 10px 10px;
border-bottom:1px solid #000;
border-right:1px solid #000;
font-size:100%;
font-weight:normal;
vertical-align:top;
}
.table-border .price{
font-size:170%;
font-weight:bolder;
color:#F00000;
text-align:center;
}
.table-border .price span{
font-size:40%;
font-weight:bolder;
color:#F00000;
margin:0px;
padding:0px 0px 0px 2px;
}
.table-border .haikei{
background:#FFF300;
}



.sidemenu_banner{
width:100%;
margin:0px 0px 0px 0px;
padding:10px 0px 0px 0px;
clear:both;
}
.sidemenu_banner ul{
margin:0px 0px 0px 0px;
padding:0px 0px 5px 0px;
}
.sidemenu_banner li{
margin:0px 0px 5px 0px;
padding:0px 0px 0px 0px;
list-style:none;
text-align:center;
}
.sidemenu_banner img{
width:100%;
max-width:220px;
margin:0px 0px 0px 0px;
}






.sidemenu_img{
width:100%;
margin:0px 0px 10px 0px;
padding:0px 0px 0px 0px;
clear:both;
}
.sidemenu_img ul{
margin:0px 0px 0px 0px;
padding:0%;
}
.sidemenu_img li{
width:100%;
margin:0px 0px 0px 0px;
padding:2% 0px 2% 0px;
font-size:11px;
list-style:none;
border-bottom:1px dashed #ccc;
clear:both;
min-height:80px;
}
.sidemenu_img img{
width:80px;
height:80px;
margin:0 1% 0 0;
padding:0;
float:left;
}






.taiou{
width:100%;
margin:10px 0px 20px 0px;
padding:0px 0px 0px 0px;
clear:both;
}
.taiou ul{
margin:0px 0px 0px 0px;
padding:0px 0px 0px 0px;
}
.taiou li{
width:29%;
list-style:none;
float:left;
margin:0% 2% 2% 2%;
padding:5px 0px 5px 0px;
font-size:11px;
line-height:130%;
color:#333;
}
.taiou img{
width:100%;
max-width:200px;
}
.taiou p{
clear:both;
width:100%;
text-align:center;
font-weight:normal;
color:#000;
font-size:100%;
margin:5px 0px 0px 0px;
padding:4px 0px 4px 0px;
background:#ededed;
border-radius: 5px;
}


.beforeafter{
width:100%;
margin:20px 0px 0px 0px;
padding:0px 0px 0px 0px;
clear:both;
}
.beforeafter ul{
margin:0px 0px 0px 0px;
padding:0px 0px 0px 0px;
}
.beforeafter li{
width:40%;
list-style:none;
float:left;
margin:0% 5% 3% 5%;
padding:0px 0px 0px 0px;
font-size:11px;
line-height:130%;
color:#333;
text-align:center;
}
.beforeafter img{
width:100%;
max-width:260px;
}
.beforeafter p{
clear:both;
width:100%;
text-align:center;
font-weight:bolder;
color:#0088D6;
font-size:14px;
margin:0px 0px 0px 0px;
padding:5px 0px 5px 0px;
}
.beforeafter table{
width:100%;
margin:5px 0px 0px 0px;
padding:0px 0px 0px 0px;
border-top:1px solid #ccc;
border-left:1px solid #ccc;
}
.beforeafter th{
text-align:left;
vertical-align:middle;
margin:0px 0px 0px 0px;
padding:3px 5px 3px 5px;
border-bottom:1px solid #ccc;
border-right:1px solid #ccc;
background:#ededed;
color:#666;
}
.beforeafter td{
text-align:left;
vertical-align:middle;
margin:0px 0px 0px 0px;
padding:3px 5px 3px 5px;
border-bottom:1px solid #ccc;
border-right:1px solid #ccc;
color:#333;
}
.beforeafter .totpl{
width:100%;
text-align:left;
margin:10px 0px 0px 0px;
padding:7px 0px 7px 0px;
text-align:center;
background:#ED6B00;
color:#fff;
font-size:12px;
border-radius: 5px;
}
.beforeafter .totpl:hover{
width:100%;
text-align:left;
margin:10px 0px 0px 0px;
padding:7px 0px 7px 0px;
text-align:center;
background:#666;
color:#fff;
font-size:12px;
border-radius: 5px;
}


.hani{
font-size:120%;
line-height:180%;
width:100%;
margin:0px 0px 0px 0px;
padding:0px 0px 0px 0px;
clear:both;
}




@media screen and (min-width: 480px) and (max-width: 999999px) {
.hani p{
text-align:left;
font-weight:bolder;
font-size:140%;
margin:20px 0px 5px 0px;
padding:7px 0px 7px 10px;
}
.hani img{
max-width:330px;
width:100%;
float:right;
margin:0px 0px 0px 0px;
}
}
@media screen and (max-width: 479px) {
.hani p{
clear:both;
text-align:left;
font-weight:bolder;
font-size:140%;
margin:20px 0px 5px 0px;
padding:7px 0px 7px 10px;
}
.hani img{
width:100%;
clear:both;
margin:0px 0px 0px 0px;
}
}



.hani .hani_header{
border-left:7px solid red;
}
.hani .hani_leftmenu{
border-left:7px solid blue;
}
.hani .hani_toppage{
border-left:7px solid orange;
}
.hani .hani_footer{
border-left:7px solid green;
}

.hani span{
text-align:left;
margin:10px 0px 15px 0px;
padding:5px 20px 5px 20px;
text-align:center;
background:#ED6B00;
color:#fff;
font-size:90%;
border-radius: 5px;
}
.hani span:hover{
background:#666;
}


.contact{
margin:20px 0px 0px 0px;
padding:0px 0px 0px 0px;
}
.contact img{
width:100%;
margin:0px 0px 12px 0px;
padding:0px 0px 0px 0px;
}

.motto{
width:100%;
}

#contents .more {
clear:both;
text-align: center;
padding: 7px 0px 7px 0px;
margin:10px 0% 10px 0%;
cursor: pointer;
background:#0088D6;
color:#fff;
font-size:130%;
border-radius: 5px;
width:100%;
text-align:center;
}
#sidebar .more {
clear:both;
text-align: center;
padding: 4px 0px 4px 0px;
margin:10px 0% 0px 0%;
cursor: pointer;
background:#0088D6;
color:#fff;
font-size:110%;
border-radius: 5px;
width:100%;
text-align:center;
}


.more:hover{
background:#999;
}


.flow{
margin:0px 0px 0px 0px;
padding:0px 0px 0px 0px;
}
.flow b{
color:#ff0000;
}
.flow .icon-flow{
max-width:19%;
max-height:120px;
margin:0px 0px 10px 10px;
padding:0px 0px 0px 0px;
float:right;
}
.flow p{
margin:0px 0px 12px 40px;
padding:0px 0px 0px 0px;
line-height:30px;
color:#000;
font-size:18px;
font-weight:bolder;
} 
.flow p span{
color:#ff0000;
padding:0px 0px 0px 10px;
}
.flow .flow01{
margin:0px 0px 0px 0px;
padding:20px 20px 20px 20px;
font-size:14px;
line-height:180%;
background:url(./images/back-flow01.jpg) left top no-repeat;
border:3px solid #ccc;
}
.flow .flow02{
margin:0px 0px 0px 0px;
padding:20px 20px 20px 20px;
font-size:14px;
line-height:180%;
background:url(./images/back-flow02.jpg) left top no-repeat;
border:3px solid #ccc;
}
.flow .flow03{
margin:0px 0px 0px 0px;
padding:20px 20px 20px 20px;
font-size:14px;
line-height:180%;
background:url(./images/back-flow03.jpg) left top no-repeat;
border:3px solid #ccc;
}
.flow .flow04{
margin:0px 0px 0px 0px;
padding:20px 20px 20px 20px;
font-size:14px;
line-height:180%;
background:url(./images/back-flow04.jpg) left top no-repeat;
border:3px solid #ccc;
}
.flow .flow05{
margin:0px 0px 0px 0px;
padding:20px 20px 20px 20px;
font-size:14px;
line-height:180%;
background:url(./images/back-flow05.jpg) left top no-repeat;
border:3px solid #ccc;
}
.flow .flow06{
margin:0px 0px 0px 0px;
padding:20px 20px 20px 20px;
font-size:14px;
line-height:180%;
background:url(./images/back-flow06.jpg) left top no-repeat;
border:3px solid #ccc;
}
.flow .flow07{
margin:0px 0px 0px 0px;
padding:20px 20px 20px 20px;
font-size:14px;
line-height:180%;
background:url(./images/back-flow07.jpg) left top no-repeat;
border:3px solid #ccc;
}
.flow span{
font-size:80%;
color:#666;
line-height:140% !important;
}

.case{
width:100%;
margin:15px 0px 15px 0px;
padding:0px 0px 0px 0px;
font-size:100%;
line-height:160%;
}
.case .left{
float:left;
margin:0px 10px 10px 0px;
padding:0px 0px 0px 0px;
max-width:30%;
}
.case .right{
float:right;
margin:0px 0px 10px 10px;
padding:0px 0px 0px 0px;
max-width:30%;
}
.case p{
font-weight:bolder;
margin:0px 0px 5px 0px;
padding:0px 0px 0px 0px;
color:#0088D6;
font-size:17px;
}

.case a      {color:#ff000;}
.case a:hover{color:#ff000;}


.postmail{
max-width:600px;
padding:0px 1% 20px 1%;
background:#fff;
}
.contents-postmail img{
margin:0;
padding:0;
width:100%;
}
.table-postmail{
width:100%;
margin:0px 0px 0px 0px;
padding:0px 0px 0px 0px;
font-size:110%;
text-align:center;
}

.table-postmail table{
width:100%;
margin:0px 0px 10px 0px;
padding:0px 0px 0px 0px;
border-top:3px solid #ccc;
border-left:3px solid #ccc;
}
.table-postmail th{
width:22%;
margin:0px 0px 0px 0px;
padding:5px 10px 5px 10px;
border-bottom:3px solid #ccc;
border-right:3px solid #ccc;
font-size:100%;
font-weight:bolder;
text-align:left;
vertical-align:middle;
background:#ededed;
}
.table-postmail td{
margin:0px 0px 0px 0px;
padding:5px 10px 5px 10px;
border-bottom:3px solid #ccc;
border-right:3px solid #ccc;
font-size:100%;
font-weight:normal;
vertical-align:top;
}
.table-postmail .hissuu{
background:#FDFFA8;
}

.table-postmail input{
width:70%;
min-height:25px;
margin:2px 0px 2px 0px;
border:1px solid #ccc;
border-radius:5px;
padding:0 2% 0 2%;
font: 12px/1.5 "メイリオ","Meiryo",arial,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",Osaka,"ＭＳ Ｐゴシック","MS PGothic",Sans-Serif;
}
.table-postmail textarea{
width:96%;
min-height:22px;
margin:2px 0px 2px 0px;
border:1px solid #ccc;
border-radius:5px;
padding:0 2% 0 2%;
font: 12px/1.5 "メイリオ","Meiryo",arial,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",Osaka,"ＭＳ Ｐゴシック","MS PGothic",Sans-Serif;
}
.button-postmail{
max-width:600px;
width:100%;
margin:0px;
padding:0px;
text-align:center;
}
.button-postmail p{
width:100%;
text-align:center;
font-size:150%;
margin:20px 0px 20px 0px;
padding:0px;
clear:both;
}
.button-postmail input{
border:1px solid #fff;
font: 12px/1.5 "メイリオ","Meiryo",arial,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",Osaka,"ＭＳ Ｐゴシック","MS PGothic",Sans-Serif;
}
.button-postmail .button1{
font-size:130%;
background:#0088D6;
color:#fff;
width:70%;
height:45px;
margin:0px 0px 8px 0px;
border-radius:5px;
}
.button-postmail .button2{
background:#999;
color:#fff;
width:70%;
height:35px;
margin:0px 0px 8px 0px;
border-radius:5px;
}
.button-postmail .button1:hover{
background:#666;
}
.button-postmail .button2:hover{
background:#C4C4C3;
}
@media screen and (min-width: 480px) and (max-width: 999999px) {

.postmail-tel {
	display:none;
}
}
@media screen and (max-width: 479px) {

.postmail-tel {
font-weight:bolder;
text-align:center;
	font-size:130%;
	background:#0088D6;
	color:#fff;
	width:100%;
padding:10px 0px 10px 0px;
	margin:0px 0px 8px 0px;
	border-radius:5px;
}
.postmail-tel a{color:#fff;}
.postmail-tel span{
font-weight:normal;
	font-size:80%;
	padding:0px 0px 0px 5px;
}
}








@media screen and (min-width: 480px) and (max-width: 999999px) {
.topcat2{
clear:both !important;
width:100%;
margin:0px 0px 0px 0px;
padding:10px 0px 0px 0px;
}
.topcat2 ul{
clear:both !important;
width:100%;
margin:0px 0px 0px 0px;
padding:0px 0px 0px 0px;
clear:both;
}
.topcat2 li{
width:31%;
height:450px;
margin:10px 0px 10px 0px;
padding:0 1% 0 1%;
list-style:none;
float:left;
}
.topcat2 li img{
width:97%;
margin:0px 0px 0px 0px;
padding:0px 0px 0px 0px;
}
.topcat2 p{
width:100%;
font-size:120%;
font-weight:bolder;
color:#000;
margin:6px 0px 2px 0px;
padding:0px 0px 0px 0px;
}
.topcat2 span{
font-weight:bolder;
color:#FF0062;
}
.topcat2 br{
clear:both !important;
}
.topcat2 a{
color:#000 !important;
text-decoration:none !important;
}
}
@media screen and (max-width: 479px) {
.topcat2{
clear:both;
width:100%;
margin:0px 0px 0px 0px;
padding:10px 0px 0px 0px;
}
.topcat2 ul{
width:100%;
margin:0px 0px 0px 0px;
padding:0px 0px 0px 0px;
clear:both;
}
.topcat2 li{
width:31%;
height:380px;
overflow-y:scroll;
margin:10px 0px 10px 0px;
padding:0 1% 0 1%;
list-style:none;
float:left;
font-size:10px;
line-height:120%;
}
.topcat2 li img{
width:97%;
margin:0px 0px 0px 0px;
padding:0px 0px 0px 0px;
}
.topcat2 p{
width:100%;
font-size:110%;
font-weight:bolder;
color:#000;
margin:6px 0px 2px 0px;
padding:0px 0px 0px 0px;
}
.topcat2 span{
font-weight:bolder;
color:#FF0062;
}
.topcat2 br{
clear:both !important;
}
.topcat2 a{
color:#666 !important;
text-decoration:none !important;
}
}











.topcat3{
clear:both;
width:100%;
font-size:90%;
margin:0px 0px 0px 0px;
padding:10px 0px 0px 0px;
}
.topcat3 ul{
width:100%;
margin:0px 0px 0px 0px;
padding:0px 0px 0px 0px;
clear:both;
}
.topcat3 li{
width:30%;
margin:10px 1% 10px 1%;
padding:10px 0 10px 0;
list-style:none;
float:left;
border:3px solid #000;
box-shadow:3px 3px;
text-align:center;
}
.topcat3 li img{
width:90%;
margin:0px 0px 0px 0px;
padding:0px 0px 0px 0px;
}
.topcat3 p{
font-size:110%;
font-weight:bolder;
color:#000;
margin:6px 0px 3px 0px;
padding:0px 0px 0px 0px;
}

.yakusoku{
width:98%;
margin:0px 0px 30px 0px;
padding:0px 0px 0px 0px;
clear:both;
box-shadow:4px 4px;
background:url(./images/back-yakusoku.jpg) left top repeat-y;
}

@media screen and (min-width: 480px) and (max-width: 999999px) {
.yakusoku{
width:98%;
margin:0px 0px 30px 0px;
padding:0px 0px 0px 0px;
clear:both;
box-shadow:4px 4px;
background:url(./images/back-yakusoku.jpg) left top repeat-y;
}
.yakusoku ul{
border-top:4px solid #CB0000;
border-right:4px solid #CB0000;
border-bottom:4px solid #CB0000;
margin:0px 0px 0px 0px;
padding:15px 10px 0px 90px;
}
}
@media screen and (max-width: 479px) {
.yakusoku{
width:98%;
margin:0px 0px 15px 0px;
padding:44px 0px 0px 0px;
clear:both;
box-shadow:4px 4px;
background:url(./images/back-yakusoku_smp.jpg) left top repeat-x;
}
.yakusoku ul{
border-left:4px solid #CB0000;
border-right:4px solid #CB0000;
border-bottom:4px solid #CB0000;
margin:0px 0px 0px 0px;
padding:10px 10px 0px 10px;
}
}

.yakusoku p{
font-size:180%;
font-weight:bolder;
color:#CB0000;
margin:0px 0px 5px 0px;
padding:0px 0px 0px 0px;
border-bottom:1px solid #000;
}
.yakusoku li{
margin:0px 0px 15px 0px;
padding:0px 0px 0px 0px;
font-size:97%;
list-style:none;
}

.howto{
margin:0px 0px 0p 0px;
padding:0px 0px 0px 0px;
}
.howto ul{
float:left;
width:50%;
margin:0px 0px 0p 0px;
padding:0px 0px 20px 0px;
}
.howto li{
list-style:none;
margin:0px 0px 0p 0px;
padding:0px 0px 0px 0px;
}
.howto img{
max-width:100%;
margin:10px 0px 10px 0px;
}
.howto span{
font-size:100%;
text-align:left;
margin:5px 0px 5px 0px;
padding:5px 20px 5px 20px;
text-align:center;
background:#ED6B00;
width:40%;
float:right;
color:#fff;
border-radius: 5px;
}
.howto span:hover{
background:#666;
}
.howto b{
color:#ff0000;
}



.news{
margin:0px 0px 30px 0px;
padding:0px;
font-size:11px;
line-height:140%;
height:170px;
overflow-y:scroll;
font-family:メイリオ;
}
.news ul{
margin:0px;
padding:0px 0px 0px 0px;
}
.news li{
list-style:none;
margin:0px;
padding:1% 0px 1% 0px;
border-bottom:1px dashed #ccc;
}
.news span{
padding:0px 7px 0px 0px;
color:#364E0A;
font-weight:bolder;
}




/* 事例スライダー
------------------------------------------------------------*/
.zirei{
width:100%;
margin:3% 0px 0px 0px;
padding:0px;
font-size:11px;
}
.zirei p{
font-size:130%;
font-weight:bolder;
color:#2B7CFF;
margin:0px 0px 0px 0px;
padding:2px 0px 0px 0px;
}
.zirei li{
text-align:center !important;
width:33%;
}
.zirei .totpl{
font-size:100%;
text-align:left;
margin:5px 0px 5px 0px;
padding:5px 20px 5px 20px;
text-align:center;
background:#ED6B00;
width:70%;
color:#fff;
border-radius: 5px;
}
.zirei .totpl:hover{
background:#666;
}


.bx-wrapper {
	position: relative;
	margin: 0 auto 30px;
	padding: 0;
	*zoom: 1;
}

.bx-wrapper img {
	max-width: 100%;
	display: block;
}

/* 事例スライダー（スマホ用）
------------------------------------------------------------*/
@media screen and (max-width: 479px) {

.zirei{
max-width: 479px;
width:100%;
margin:3% 0px 0px 0px;
padding:0px;
font-size:11px;
}
.zirei p{
font-size:130%;
font-weight:bolder;
color:#2B7CFF;
margin:0px 0px 0px 0px;
padding:2px 0px 0px 0px;
}

.zirei li{
text-align:center !important;
width:33% !important;
max-width:150px;
}
.zirei .totpl{
font-size:100%;
text-align:left;
margin:5px 0px 5px 0px;
padding:5px 20px 5px 20px;
text-align:center;
background:#ED6B00;
width:70%;
color:#fff;
border-radius: 5px;
}
.zirei .totpl:hover{
background:#666;
}


.bx-wrapper {
	position: relative;
	margin: 0 auto 20px;
	padding: 0;
	*zoom: 1;
}

.bx-wrapper img {
	max-width: 130px;
	display: block;
}
}







/** THEME
===================================*/

.bx-wrapper .bx-viewport {
	-moz-box-shadow: 0 0 0px #ccc;
	-webkit-box-shadow: 0 0 0px #ccc;
	box-shadow: 0 0 0px #ccc;
	border:  0px solid #fff;
	left: -0px;
	background: #fff;
	
	/*fix other elements on the page moving (on Chrome)*/
	-webkit-transform: translatez(0);
	-moz-transform: translatez(0);
    	-ms-transform: translatez(0);
    	-o-transform: translatez(0);
    	transform: translatez(0);
}

.bx-wrapper .bx-pager,
.bx-wrapper .bx-controls-auto {
	position: absolute;
	bottom: -30px;
	width: 100%;
}

/* LOADER */

.bx-wrapper .bx-loading {
	min-height: 50px;
	background: url(./images/bx_loader.gif) center center no-repeat #fff;
	height: 100%;
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2000;
}

/* PAGER */

.bx-wrapper .bx-pager {
	text-align: center;
	font-size: .85em;
	font-family: Arial;
	font-weight: bold;
	color: #666;
	padding-top: 20px;
}

.bx-wrapper .bx-pager .bx-pager-item,
.bx-wrapper .bx-controls-auto .bx-controls-auto-item {
	display: inline-block;
	*zoom: 1;
	*display: inline;
}

.bx-wrapper .bx-pager.bx-default-pager a {
	background: #666;
	text-indent: -9999px;
	display: block;
	width: 10px;
	height: 10px;
	margin: 0 5px;
	outline: 0;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
}

.bx-wrapper .bx-pager.bx-default-pager a:hover,
.bx-wrapper .bx-pager.bx-default-pager a.active {
	background: #000;
}

/* DIRECTION CONTROLS (NEXT / PREV) */

.bx-wrapper .bx-prev {
	left: 10px;
	background: url(./images/controls.png) no-repeat 0 -32px;
}

.bx-wrapper .bx-next {
	right: 10px;
	background: url(./images/controls.png) no-repeat -43px -32px;
}

.bx-wrapper .bx-prev:hover {
	background-position: 0 0;
}

.bx-wrapper .bx-next:hover {
	background-position: -43px 0;
}

.bx-wrapper .bx-controls-direction a {
	position: absolute;
	top: 50%;
	margin-top: -16px;
	outline: 0;
	width: 32px;
	height: 32px;
	text-indent: -9999px;
	z-index: 9999;
}

.bx-wrapper .bx-controls-direction a.disabled {
	display: none;
}

/* AUTO CONTROLS (START / STOP) */

.bx-wrapper .bx-controls-auto {
	text-align: center;
}

.bx-wrapper .bx-controls-auto .bx-start {
	display: block;
	text-indent: -9999px;
	width: 10px;
	height: 11px;
	outline: 0;
	background: url(./images/controls.png) -86px -11px no-repeat;
	margin: 0 3px;
}

.bx-wrapper .bx-controls-auto .bx-start:hover,
.bx-wrapper .bx-controls-auto .bx-start.active {
	background-position: -86px 0;
}

.bx-wrapper .bx-controls-auto .bx-stop {
	display: block;
	text-indent: -9999px;
	width: 9px;
	height: 11px;
	outline: 0;
	background: url(./images/controls.png) -86px -44px no-repeat;
	margin: 0 3px;
}

.bx-wrapper .bx-controls-auto .bx-stop:hover,
.bx-wrapper .bx-controls-auto .bx-stop.active {
	background-position: -86px -33px;
}

/* PAGER WITH AUTO-CONTROLS HYBRID LAYOUT */

.bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-pager {
	text-align: left;
	width: 80%;
}

.bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-controls-auto {
	right: 0;
	width: 35px;
}

/* IMAGE CAPTIONS */

.bx-wrapper .bx-caption {
	position: absolute;
	bottom: 0;
	left: 0;
	background: #666\9;
	background: rgba(80, 80, 80, 0.75);
	width: 100%;
}

.bx-wrapper .bx-caption span {
	color: #fff;
	font-family: Arial;
	display: block;
	font-size: .85em;
	padding: 10px;
}



/* ページトップへ戻る
------------------------------------------------------------*/

.pageTop {
	display:none;
	position:relative;
	width:90%;
	max-width:900px;
	height:0;
	margin:0 auto;
}
.pageTop a {
	position: fixed;
	bottom: 0px;
	left:auto;
	display: block;
	width: 77px;
	hegiht:77px;
	margin-left:846px;
	padding:1em 0 1em 2px;
	background:#000;
	text-align:center;
	outline:none;
	text-decoration: none;
	z-index:9999;
	border-radius:3px 3px 0 0;
}
.pageTop a:before,
.pageTop a:after {
	position:absolute;
	left:50%;
	content:"";
	width:0px;
	height:0px;
	margin-left:-10px;
	border:10px solid transparent;
}
.pageTop a:before {
	top:50%;
	margin-top:-13px;
	border-bottom:10px solid #000;
}
.pageTop a:after {
	top:50%;
	margin-top:-15px;
	z-index:-1;
	border-bottom:10px solid #fff; /* 矢印の色 */
}

/* =====================
	タブレット向け
======================= */
@media screen and (min-width: 480px) and (max-width: 959px) {

.pageTop {
	width:100%;
}
.pageTop a {
	left:-68px;
	margin-left:100%;
}

/* タブレット向けここまで */ }

/* =====================
	スマホ向け
======================= */
@media screen and (max-width: 479px) {

.pageTop {
	width:100%;
}
.pageTop a {
	left:-68px;
	margin-left:100%;
}

/* スマホ向けここまで */ }












/***************************************

      head

***************************************/

.navBar{
    position:fixed;
    top:0;
    left:0;
    width:100%;
height:100px;
    z-index:1000;
    background:#fff;
    border-bottom:1px solid #fff;
}   

.navBar li{
    float:left;
margin:0;
padding:0;
}

.navBar .navMenu{
    width:13%;
    height:30px;
}
.navBar .navHome{
    width:74%;
text-align:center;
}
.navBar .navCart{
    width:13%;
text-align:right;
    height:30px;
}


.navBar li:last-child{
    margin-right:0; 
}

.navBar li a{
    display:block;
    height:100px;
}




@media screen and (min-width: 480px) and (max-width: 999999px) {
.navMenu img{
    height:30px;
    vertical-align:0px;
    margin:0px;
display:none !important;
}
.navHome img{
    height:80%;
    vertical-align:0px;
    margin:0;
}
.navCart img{
    height:35px;
    vertical-align:0px;
    margin:10px 10px 0px 0px;
}
}
@media screen and (max-width: 479px) {
.navMenu img{
    height:30px;
    vertical-align:0px;
    margin:0px;
}
.navHome img{
    height:70%;
    vertical-align:0px;
    margin:0;
}
.navCart img{
    height:30px;
    vertical-align:0px;
    margin:0px;
}
}




#sideMenu{
    position:fixed;
    top:100px;
    right:-270px;
    width:270px;
    height:100%;
    background:#4f4f4f;
	overflow:scroll;
}

.searchArea{
    background:#333;
    padding:15px 10px;
    text-align:left;    
}

input[name="brand_search_form"]{
    display:inline-block;
    width:80%;
    padding:10px;
    box-sizing:border-box;
    border:none;
}

input[name="brand_search_button"]{
    border-radius:6px;  
    box-sizing:border-box;
    background:url("/smartphone/images/template/5/icon-search.png") no-repeat center center;
    background-size:26px 26px;
    text-indent:-9999em;
    width:40px;
    height:30px;
}

.sideNav{
    margin:15px 0 100px;
    text-align:left;
    font-size:15px;
}

.sideNav,.sideNav a{
    color:#fff;
}

.sideNav li a{
    padding:10px;
    display:block;  
}

.categorySwitch{
    padding:10px;
    display:block;
    background:url("/smartphone/images/template/5/icon-close.png") no-repeat 90% center;
    background-size:26px 26px;
}

.categorySwitch.open{
    background-image:url("/smartphone/images/template/5/icon-open.png");    
}

.sideCategory{
    display:none;   
}

#category_list2 {
    margin-top:5px;
}   

#category_list2 li a{
    font-size:13px;
}

header{
    margin-top:100px;    
}





















@media screen and (min-width: 480px) and (max-width: 999999px) {
#menu{
margin:102px 0px 0px 0px;
padding:0px 0px 0px 0px;
width:100%;
border-top:1px solid #000;
border-bottom:1px solid #000;
font-family: 'Century Gothic', "メイリオ","Meiryo";
}
#menu ul {
width:100%;
   display:block;
   list-style-type: none;
   margin:0;
   padding:0;
    display: table;
    table-layout: fixed;
}


#menu ul ul{
   display:none;
   position:absolute;
   top:100%;
   left:0;
z-index: 300;
}

#menu ul ul ul {
   top:0;
   left:100%;
}

#menu li {
display: table-cell;
color:#000;
margin:0px 0px 0px 0px;
padding:1.5% 0px 1.5% 0px;
	border-right:solid 1px #000;
	text-align:center;
font-weight:bolder;
line-height:150%;
}
#menu li span{
font-size:8px !important;
padding:0px 0px 0px 0px;
font-weight:normal !important;
}
#menu a{color:#000;text-decoration:none;font-size:13px;}
#menu a:hover{color:#000;text-decoration:none;font-size:13px;}


#menu li li {
float:left;
clear:both;
width:200px;
height:25px;
line-height:25px;
padding:0px 0px 0px 10px;
background:#fff;
font-weight:normal;
color:#000;
text-align:left;
font-size:90%;
border-right:1px solid #fff;
}
#menu li li:hover{
background:#f5f5f5;
font-size:90%;
text-decoration:none !important;
}

#menu li:hover {
   position:relative;
background:#f5f5f5;
}

#menu li:hover > ul {
   display: block
}

* html #menu li {
   behavior: expression(
      this.onmouseover=new Function("this.className='column1'"),
      this.onmouseout=new Function("this.className=''"),
      this.style.behavior = 'none'
   );
}

* html #menu li li {
   behavior: expression(
      this.onmouseover=new Function("this.className='column2'"),
      this.onmouseout=new Function("this.className=''"),
      this.style.behavior = 'none'
   );
}

* html #menu li li li {
   behavior: expression(
      this.onmouseover=new Function("this.className='column3'"),
      this.onmouseout=new Function("this.className=''"),
      this.style.behavior = 'none'
   );
}

#menu .column1 {position:relative;}
#menu .column1 ul {display:block;}
#menu .column1 * ul {display:none;}

#menu .column2 {position:relative;}
#menu .column2 ul {display:block;}
#menu .column2 * ul {display:none;}

#menu .column3 {position:relative;}
#menu .column3 ul {display:block;}
#menu .column3 * ul {display:none;}
}
@media screen and (max-width: 479px) {
#menu{
margin:80px 0px 0px 0px;
padding:0px 0px 0px 0px;
width:100%;
}
#menu ul {
display:none;
}
}


@media screen and (min-width: 480px) and (max-width: 999999px) {
#slideiframe{
width:950px;
height:430px;
margin:10px 0px 0px 0px;
padding:0px 0px 0px 0px;
}
}
@media screen and (max-width: 479px) {
#slideiframe{
width:100%;
height:160px;
margin:2% 0px 0px 0px;
padding:0px 0px 0px 0px;
}
}


#pankuzu{
margin:0;
padding:0;
}
#pankuzu a      {color:#fff;background:#FF0062;padding:0% 1% 0% 1%;font-size:10px;border-radius:3px;margin:0 1% 0 0;line-height:14px;text-decoration:none;}
#pankuzu a:hover{color:#fff;background:#cccccc;padding:0% 1% 0% 1%;font-size:10px;border-radius:3px;margin:0 1% 0 0;line-height:14px;text-decoration:none;}



.tpl1{
max-width:630px;
width:94%;
margin:2% 1% 2% 1%;
padding:3% 3% 3% 3%;
border:1px dotted #ccc;
}
.tpl1 p{
font-weight:bolder;
font-size:110%;
margin:0px 0px 0px 0px;
padding:0px 0px 0px 0px;
}
.tpl1 ul{
margin:2% 0 2% 0;
padding:0% 3% 0% 3%;
font-size:13px;
line-height:160%;
}
.tpl1 li{
margin:1% 0 1% 0;
padding:0% 0% 0% 2%;
font-size:13px;
line-height:160%;
list-style:disc;
}



.tpl2{
max-width:630px;
width:94%;
margin:2% 1% 2% 1%;
padding:3% 3% 3% 3%;
border:1px solid #ccc;
}
.tpl2 p{
font-weight:bolder;
font-size:110%;
margin:0px 0px 0px 0px;
padding:0px 0px 0px 0px;
}
.tpl2 ul{
margin:2% 0 2% 0;
padding:0% 3% 0% 3%;
font-size:13px;
line-height:160%;
}
.tpl2 li{
margin:1% 0 1% 0;
padding:0% 0% 0% 2%;
font-size:13px;
line-height:160%;
list-style:disc;
}



.tpl3{
max-width:630px;
width:94%;
margin:2% 1% 2% 1%;
padding:3% 3% 3% 3%;
border:1px dotted #ccc;
background:#f5f5f5;
border-radius:5px;
}
.tpl3 img{
width:100%;
margin:1% 0 1% 0;
padding:0;
}
.tpl3 p{
font-weight:bolder;
font-size:110%;
margin:0px 0px 0px 0px;
padding:0px 0px 0px 0px;
}
.tpl3 iframe{
max-width:100% !important;
}


.sharelink{
width:100%;
text-align:left;
margin:1% 0 1% 0;
padding:0;
clear:both;
}
.sharelink table{
margin:0px 0px 0px 0px;
padding:0px 0px 0px 0px;
}
.sharelink td{
vertical-align:top !important;
margin:0px 0px 0px 0px;
padding:0px 10px 0px 0px;
}

.right-sns{
width:100%;
margin:3% 0% 4% 0%;
padding:0;
}
.right-sns ul{
width:100%;
margin:0;
padding:0;
}
.right-sns li{
list-style:none;
float:left;
width:18%;
margin:1%;
padding:0;
text-align:center;
}
.right-sns li img{
width:90%;
margin:0;
padding:0;
}