@charset "utf-8";

/* ---------------------------------------------------------------------- */
/*	basic setting
/* ---------------------------------------------------------------------- */

/*  body 
================================== */

body { line-height: 200%; 
  background-image:url(../image/background/body.png); background-repeat:repeat; 
}

/*  img 
================================== */

img, object, embed {
  max-width: 100%;
  height: auto; 
}

object, embed {
  height: 100%; 
}

img{
  -ms-interpolation-mode: bicubic; 
}

/*  link 
================================== */
.item-box a:link, .item-box a:visited { 
  color: #3e5524;
  text-decoration: underline; 
}
.item-box a:hover {
  color: #839070 ;
  text-decoration: none;
}

footer a:link, footer a:visited { 
  color: #dfe6d5;
  text-decoration: underline; 
}
footer a:hover {
	color: #CCCCFF;
	text-decoration: none;
}

/* ---------------------------------------------------------------------- */
/*	header
/* ---------------------------------------------------------------------- */

.header { border-top: 5px solid #7c3693; }

#header-left { float: left; }
#header-right { float: right; padding-top: 10px; }

/*  logo
================================== */
h1 .logo { margin-top: -80px; }

/*  social links
================================== */
.shop-logo { width: 280px; display: inline-block; }
.shop-logo img { margin-left: 100px; }

/*  social links
================================== */
.social { clear:right; float:right; list-style:none; margin:10px 0 10px 0; padding: 0; }
.social li { display:inline-block; text-indent:-999em; }
.social li a { background-color:#855cb8; }
.social li a { display:block; width:32px; height:32px; margin-left:5px; background-image:url(../image/background/social.png); background-repeat:no-repeat; 
  -webkit-border-radius: 4px;
     -moz-border-radius: 4px;
          border-radius: 4px;
  -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box;
}
.social li:first-child a { margin-left:0; } 
.social li a.facebook:hover { background-color:#3c5fac; }
.social li a.twitter { background-position:-32px 0; }
.social li a.twitter:hover { background-color:#5ec3df; }
.social li a.flickr { background-position:-64px 0; }
.social li a.flickr:hover { background-color:#FF0084; }
.social li a.rss { background-position:-96px 0; }
.social li a.rss:hover { background-color:#ff9900; }
.social li a.dribble { background-position:-128px 0; }
.social li a.dribble:hover { background-color:#EA4C89; }
.social li a.lastfm { background-position:-160px 0; }
.social li a.lastfm:hover { background-color:#D51007; }
.social li a.linkedin { background-position:-192px 0; }
.social li a.linkedin:hover { background-color:#2089b5; }
.social li a.vimeo { background-position:-224px 0; }
.social li a.vimeo:hover { background-color:#0dadd6; }
.social li a.google { background-position:-256px 0; }
.social li a.google:hover { background-color:#c63d2d; }
.social li a.forrst { background-position:-288px 0; }
.social li a.forrst:hover { background-color:#5b9a68; }
.social li a.skype { background-position:-320px 0; }
.social li a.skype:hover { background-color:#00aff0; }
.social li a.picassa { background-position:-352px 0; }
.social li a.picassa:hover { background-color:#ffd34e; }
.social li a.youtube { background-position:-384px 0; }
.social li a.youtube:hover { background-color:#c8312b; }
.social li a.pinterest { background-position:-416px 0; }
.social li a.pinterest:hover { background-color:#cb2027; }

/* ---------------------------------------------------------------------- */
/*	cycle
/* ---------------------------------------------------------------------- */
.cycle { margin: 20px 0 0; background-color: #ffffff; }
.cycle-in { width: 460px; padding: 20px 0; }
.cycle0, .cycle1, .cycle2, .cycle3, .cycle4, .cycle5, .cycle6 { 
  margin: 10px; float: left; width: 124px; height: 124px; border: 1px solid #CCC; overflow: hidden;
}
.cycle-in img { width: 120x; height: 120px; }

/* ---------------------------------------------------------------------- */
/*	nav
/* ---------------------------------------------------------------------- */
.main-nav { height: 82px; line-height: 82px; background-image:url(../image/background/main-nav.png); background-repeat:repeat; }
.main-nav ul { list-style: none; margin: 0; padding: 0; height: 82px; line-height: 82px; }
.main-nav li { display: inline-block; float: left; none; margin: 0; padding: 0; height: 82px; line-height: 82px; }

/* ---------------------------------------------------------------------- */
/*	character
/* ---------------------------------------------------------------------- */
.character { position: absolute; top: 100px; left: 50%; z-index: 500; }

/* ---------------------------------------------------------------------- */
/*	item
/* ---------------------------------------------------------------------- */
.item-box { float: left; width: 215px; min-height: 340px; margin: 10px; border: 5px solid #897090; background-color: #ffffff; position: relative;
  -webkit-border-radius: 4px;
     -moz-border-radius: 4px;
          border-radius: 4px;
}
.item-box .item-img { margin: 5px 0; }
.item-box .item-img a { display: block; width: 152px; height: 152px; margin: auto; padding: 1px; text-align: center; overflow: hidden; } 
.item-box h3 { font-size: 14px; margin: 5px 0; }
.item-box .price { margin: 5px auto 10px; padding: 5px 10px; text-align: center; color: #3e5524; background-color: #e3d8e6; position: absolute; bottom: 45px; left:50%; margin-left: -40%; width: 80%;
  -webkit-border-radius: 4px;
     -moz-border-radius: 4px;
          border-radius: 4px;
}
.item-box .button { margin: 0 auto; text-align: center; position: absolute; bottom: 15px; left:50%; margin-left: -40%;  width: 80%; }
.item-box .button a { color: #ffffff; text-decoration: none; }

/* ---------------------------------------------------------------------- */
/*	about
/* ---------------------------------------------------------------------- */
#about { margin: 50px 0; }
.about-in { background-image:url(../image/background/about.png); background-repeat:no-repeat; padding: 80px 0; min-height: 500px; }
.about-in table th { white-space: nowrap; }
.about-character-img { margin: 30px 80px; }

/* ---------------------------------------------------------------------- */
/*	blockquote
/* ---------------------------------------------------------------------- */
blockquote {
    background-color: #668f35;
	background-image:url(../image/background/footer.png);
    border: none;
    color: #468847;
    border-radius: 4px;
    margin-bottom: 10px;
    padding: 15px;
}
blockquote p { font-size: 14px; }
blockquote a { color: #DFE6D5; padding-left: 14px; background-image:url(../image/background/arrow.png); background-repeat:no-repeat; }

blockquote a:link, blockquote a:visited { color: #DFE6D5; text-decoration: underline; }
blockquote a:hover { color: #DFE6D5 ; text-decoration: none; }

/* ---------------------------------------------------------------------- */
/*	footer
/* ---------------------------------------------------------------------- */
footer { background-image:url(../image/background/footer.png); background-repeat:repeat; }

/*  back-to-top
================================== */
.back-to-top a { float: right; display: block; width: 110px; height: 32px; }

/*  social
================================== */
.social-box { margin: 10px 0; }

div.twitter,
div.twitter iframe[style],
div.twitter span {
    width: 100% !important;
	background-color: #ffffff;
}


div.fb-like-box,
div.fb-like-box iframe[style],
div.fb-like-box span {
    width: 100% !important;
	background-color: #ffffff;
}

/*  nav
================================== */
footer ul { list-style: none; margin: 20px 0; padding: 0 20px; line-height: 40px; height: 40px; background-color: #703c8e; 
  -webkit-border-radius: 4px;
     -moz-border-radius: 4px;
          border-radius: 4px;
}
footer li { display: inline-block; float: left; none; margin: 0; padding: 0 10px; line-height: 40px; }
footer li a { padding-left: 14px; background-image:url(../image/background/arrow.png); background-repeat:no-repeat; }

/*  copyright
================================== */
.copyright { background-color: #283418; }
.copyright p { color: #ffffff; text-align: center; }

/* ---------------------------------------------------------------------- */
/*	character-footer
/* ---------------------------------------------------------------------- */
.character-footer .row { position: relative; }
.character-footer-in { position: absolute; top: -200px; right: 5px; z-index: 500; }


/* ---------------------------------------------------------------------- */
/*	▼ Responsive ▼ 
/* ---------------------------------------------------------------------- */

/* ---------------------------------------------------------------------- */
/*	タブレット縦画面
/* ---------------------------------------------------------------------- */

@media only screen and (min-width: 569px) and (max-width: 990px) {
	
/* ---------------------------------------------------------------------- */
/*	header
/* ---------------------------------------------------------------------- */

/*  logo
================================== */
h1 .logo { margin-top: 0; width: 280px; }

/*  social links
================================== */
.shop-logo { width: 180px; display: inline-block; }
.shop-logo img { margin-left: 0px; }

/* ---------------------------------------------------------------------- */
/*	cycle
/* ---------------------------------------------------------------------- */
.cycle0, .cycle1, .cycle2, .cycle3, .cycle4, .cycle5, .cycle6 { 
  margin: 5px;
}

/* ---------------------------------------------------------------------- */
/*	character
/* ---------------------------------------------------------------------- */
.character img { width: 400px; }

/* ---------------------------------------------------------------------- */
/*	item
/* ---------------------------------------------------------------------- */
.item-box { float: left; width: 230px; }


}


@media only screen and (max-width: 568px) {
	
.mobile-none { display: none; }

/* ---------------------------------------------------------------------- */
/*	header
/* ---------------------------------------------------------------------- */

#header-left { text-align: center; }

/*  logo
================================== */
h1 .logo { margin-top: 0; width: 280px; }

/*  social links
================================== */
.shop-logo { width: 180px; display: inline-block; }
.shop-logo img { margin-left: 0; }

/* ---------------------------------------------------------------------- */
/*	character
/* ---------------------------------------------------------------------- */
.character { display: none; }

/* ---------------------------------------------------------------------- */
/*	cycle
/* ---------------------------------------------------------------------- */
.cycle { margin: 10px 0 0; background-color: #ffffff; }
.cycle-in { width: 100%; padding: 20px 0; }
.cycle0, .cycle1, .cycle2, .cycle3, .cycle4, .cycle5, .cycle6 { 
  margin: 5px; float: left; width: 94px; height: 94px; border: 1px solid #CCC; overflow: hidden;
}

/* ---------------------------------------------------------------------- */
/*	item
/* ---------------------------------------------------------------------- */
.item-in { padding-right: 20px; }
.item-box { float: left; width: 100%; }

/* ---------------------------------------------------------------------- */
/*	nav
/* ---------------------------------------------------------------------- */
.main-nav { display: none; }

/* ---------------------------------------------------------------------- */
/*	about
/* ---------------------------------------------------------------------- */
#about { display: none; }

/* ---------------------------------------------------------------------- */
/*	footer
/* ---------------------------------------------------------------------- */

/*  footer
================================== */
footer ul { height: 90px; }

/* ---------------------------------------------------------------------- */
/*	character-footer
/* ---------------------------------------------------------------------- */
.character-footer { display: none; }
	
}