@charset "utf-8";

/*-------------------------
 designed by design maf
 http://designmaf.com
---------------------------*/

/* reset */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0;padding:0;}
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;}
ul{list-style:none;}
table{border-collapse:collapse;border-spacing:0;}
caption,th{text-align:left;}
q:before,q:after{content:'';}
object,embed{vertical-align:top;}
hr,legend{display:none;}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}
img,abbr,acronym,fieldset{border:0;}

body{
background:#fff;
color:#674a42;
font:14px/1.5 "メイリオ","Meiryo",verdana,"ヒラギノ丸ゴ ProN W4","Hiragino Maru Gothic ProN","ＭＳ Ｐゴシック","MS PGothic",Sans-Serif;
-webkit-text-size-adjust:100%;
}
html{background:#cfaea5;}


/*-------------------------
 link
---------------------------*/
a{
text-decoration:none;
color:#967468;
}

a:hover{color:#5179b0;}

a:focus{outline:0;}

#profile a, #new a{border-bottom:1px dotted #967468;}
#content a:hover{border-color:#fff;}


/*-------------------------
 slogan
---------------------------*/
#slogan{
padding:2px 5px;
background:#cfaea5 url(../img/headerBg.png) repeat-x 0 0;
border-bottom:1px solid #906c64;
color:#fff;
}


/*-------------------------
 footer
---------------------------*/
.top{
clear:both;
padding-top:30px;
text-align:right;
}

.top img{vertical-align:middle;}

#footer{
clear:both;
padding:5px 0;
background:#cfaea5 url(../img/footerBg.png) repeat-x 0 0;
text-align:center;
font-size:11px;
}

#footer img{
margin-right:10px;
vertical-align:middle;
}

#footer, #footer a{color:#fff;}


/*-------------------------
 typography
---------------------------*/
h2.heading, h3.heading, h3.headingB{
clear:both;
display:block;
margin:30px 0 20px;
padding:0 0 0 8px;
line-height:30px;
color:#fff;
background:url(../img/headingPink.png) repeat-x 0 0;
}
h3.headingB{background-image:url(../img/headingBlue.png);}

h4{
padding-left:12px;
margin-bottom:5px;
color:#b59189;
background:url(../img/arrows.png) no-repeat 0 50%;
}

h5{
margin:5px 0;
color:#b59189;
font-weight:bold;
}

h6{
margin:5px 0;
padding:2px 5px;
background:#fff7ee;
font-size:100%;
}

.text,dl{padding:0 10px;}

dl:after{
display:block;
clear:both;
height:0px;
visibility:hidden;
content:".";
}

dt{
padding:2px 5px;
background:#fff7ee;
}

dd{
margin:5px 10px 30px 20px;
padding:2px 5px;
}

dl.answers dt{
padding-left:27px;
background:#fff7ee url(../img/q.png) no-repeat 3px 2px;
}

dl.answers dd{
padding-left:27px;
background:url(../img/a.png) no-repeat 3px 2px;
}

dl.about dt{
float:left;
margin-bottom:5px;
width:100px;
}

dl.about dd{margin:0 0 5px 115px;}

dl#new dt{width:85px;}
dl#new dd{margin-left:100px;}

.text p{padding-bottom:10px;}
.text p:last-child{padding-bottom:0;}

.link{margin:-20px 10px 30px;}
.mt20{margin-top:20px !important;}

.tbl{
width:95%;
border-collapse:collapse;
border-spacing:0;
border-top:1px solid #eecdc4;
border-right:1px solid #eecdc4;
margin:10px auto;
}

.tbl th{
width:170px;
background:#fff7ee;
}

.tbl th,.tbl td{
padding:2px 15px;
border-bottom:1px solid #eecdc4;
border-left:1px solid #eecdc4;
}



/*-------------------------
 content
---------------------------*/
#profile img{
float:right;
padding:20px 0 20px 20px;
}

img.shadow{
background:url(../img/shadow.gif) no-repeat 100% 100%;
padding:3px 8px 8px 3px;
}

#gallery{
text-align:center;
padding:10px 0 20px;
}

#gallery img{margin:0 2px;}

ul.price{padding-bottom:10px;}

ul.price li{
padding-left:14px;
margin-bottom:3px;
background:url(../img/arrows.png) no-repeat 0 10px;
}



/*-------------------------
 contact
---------------------------*/
.contact{
display:block;
padding:20px 10px 15px;
background:#fff7ef url(../img/contactBg.png) repeat-x 0 100%;
border:1px solid #bcadaa;
border-radius:10px;
text-align:center;
}

.contact br{display:none;}

.contact span{
padding:10px 0 10px 50px;
background:url(../img/mail.png) no-repeat 0 0;
}

a.contact:hover{border:1px solid #4e7cae !important;}
a.contact:hover span{background-position:0 -50px;}



@media only screen and (min-width:860px){
/*-------------------------
 layout
---------------------------*/
#wrap{
width:840px;
margin:0 auto;
background:#fff url(../img/sidebarBg.png) repeat-y 162px 0;
}

#header, #wrapper, #slogan h1, .inner{
width:840px;
margin:0 auto;
}

#wrapper{
overflow:hidden;
background:url(../img/header.png) no-repeat 0 0;
}

#content{
padding:20px 0 40px;
float:right;
width:570px;
}

#nav{
float:left;
margin-top:71px;
padding:5px 0 50px;
width:238px;
background:url(../img/sidebarBg.png) repeat-y 162px 0;
}

.counter{margin-top:5px ;}
#footer p{margin-top:-15px;}

	
/*-------------------------
 menu
---------------------------*/
#menu{display:none;}
.panel{display:block !important;}

#nav ul{
padding:27px 0 14px 11px;
margin:20px 0 20px 0;
width:215px;
background:url(../img/piano.png) repeat-y;
}

#nav ul li{margin-bottom:15px;}

#nav ul li span{font-size:10px;}

#nav ul li a{
display:block;
padding:0 0 0 15px;
line-height:25px;
width:146px;
background:url(../img/menuBg.png) no-repeat;
/*\*//*/
  overflow:hidden;
  display:inline-table;
/**/
color:#fff;
}

#nav ul li a:hover, #nav ul li#active a{
padding:0 0 0 30px;
background-position:0 -25px;
}
#nav ul li.key{margin-bottom:55px;}


/*-------------------------
 comment
---------------------------*/
.bubble{
width:auto;
margin:0 0 20px;
font-size:12px;
line-height:normal;
}

.bubble blockquote{
margin:0;
padding:0;
border:1px solid #be988f;
background:#fff;
}
.even blockquote{border-color:#5a89b9;}

.bubble blockquote p{
margin:10px;
padding:0;
}

.bubble cite{
position:relative;
margin:0px;
padding:7px 0 0 15px;
top:6px;
background:transparent url(../img/tip.gif) no-repeat 20px 0;
font-style:normal;
}

.even cite{background-image:url(../img/tip2.gif);}
}


@media only screen and (max-width:859px){
#content{margin:10px;}

#footer img{
display:block;
margin:0 auto;
}


/*-------------------------
 menu
---------------------------*/
#mainNav{
position:absolute;
top:50px;
left:10px;
margin-left:-10px;
width:100%;
}	

#menu{
display:block;
float:right;
margin-right:10px;
text-indent:-9999px;
text-decoration:none;
width:55px;
height:55px;
background:url(../img/menu.png) no-repeat 0 0;
}

#menu.close{background-position:0 -55px;}
#menu:hover{cursor:pointer;}

#nav p{
position:relative;
width:222px;
margin:10px auto 0;
z-index:100;
}

.panel{
display:none;
width:100%;
clear:both;
position:relative;
right:0;
top:10px;
z-index:1;
}

#mainNav li a{
display:block;
padding:10px;
text-align:left;
border-bottom:1px dashed #fff;
color:#fff;
background:#cfaea5;
}

#mainNav li:first-child a{border-top:1px solid #fff;}
#mainNav li:last-child{display:none;}
#mainNav li#active a,#mainNav li a:hover{background:#ba948b;}


/*-------------------------
 typography
---------------------------*/	
h2.heading, h3.heading, h3.headingB{
padding:5px 100px 5px 7px;
line-height:1.4;
background:url(../img/headingSP.png), linear-gradient(to bottom, #ba948b 0%, #cfaea5 100%);
background:url(../img/headingSP.png), -webkit-gradient(linear, left top, left bottom, from(#ba948b), to(#cfaea5));
background-repeat:no-repeat;
background-position:100% 50%;
border:1px solid #906c64;
}

h3.headingB{
background:url(../img/headingSP.png), linear-gradient(to bottom, #3c689d 0%, #82b8df 100%);
background:url(../img/headingSP.png), -webkit-gradient(linear, left top, left bottom, from(#3c689d), to(#82b8df));
background-repeat:no-repeat;
background-position:100% 50%;
border-color:#5179b0;
}

dl{padding:10px 0;}

dd{margin:5px 10px 20px;}

#slogan,#nav p{text-align:center;}
#nav p{margin:10px;}


/*-------------------------
 comment
---------------------------*/
.bubble{
font-size:12px;
line-height:normal;
margin:0 10px 10px;
}

.bubble blockquote{
margin:0 0 10px;
padding:5px 10px;
position:relative;
border:1px solid #be988f;
}

.bubble blockquote:before{
content:"";
position:absolute;
bottom:-8px;
left:30px;
border-width:8px 8px 0;
border-style:solid;
border-color:#be988f transparent;
display:block;
width:0;
}

.bubble blockquote:after{
content:"";
position:absolute;
bottom:-7px;
left:31px;
border-width:7px 7px 0;
border-style:solid;
border-color:#fff transparent;
display:block;
width:0;
}

.even blockquote{border-color:#5a89b9 !important;}
.even blockquote:before{border-color:#5a89b9 transparent!important;}

img.shadow{
display:block;
margin:0 auto;
max-width:90%;
height:auto !important;
}

#gallery img{
display:inline-block;
max-height:124px;
}
}


@media only screen and (max-width:580px){
#profile img{
display:block;
float:none;
padding:0;
margin:0 auto 10px;
}

dl.about{padding:10px 10px 10px 0;}

dl.about dt,dl#new dt{
float:none;
margin:0 0 3px;
width:100%;
}
dl.about dd,dl#new dd{
margin:0 0 10px;
padding:0 0 10px;
}

#new a{display:block;}

#gallery img{
display:inline-block;
max-height:auto;
}

#Choco_container_description{
font-size:12px !important;
height:auto !important;
}

.tbl th, .tbl td, .tbl tr{display: block;}

.tbl th{width:100%;box-sizing:border-box;}

.tbl td{ 
position: relative;
padding-left:5%; 
}
}

@media only screen and (max-width:480px){
#slogan span,.heading span{display:block;padding:0 !important;}
.contact{line-height:1.8 !important;}
.contact br{display:block;}
#nav p{margin:15px 5px 0 15px;text-align:left;}
#mainNav{top:70px;}	
}