@charset "utf-8";
/*=================================================
 * ブラウザのデフォルトのスタイルをリセットする
 * ================================================= */

html, body, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, p,
header, hgroup, section, article, aside, hgroup, footer, figure, figcaption, nav {
 margin: 0;
 padding: 0;
 font-size: 100%;
}

body {
 line-height: 1.0;
 -webkit-text-size-adjust: none;
}

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

img {
 border: 0;
 vertical-align: bottom;
}

ul, ol {
 list-style: none;
}

table {
 border-spacing: 0;
 empty-cells: show;
}

/*=================================================
 * サイト全体の基本スタイル
 * ================================================= */

body {
 color: #440A0A;
 background-image: url(../img/bg.png);
 font-family: Helvetica, san-serif;
 line-height: 1.6;
 font-size: 14px;
}

a {
 color: #9A6500;
 text-decoration: none;
}

p {
 margin-bottom: 1em;
}

em {
 font-style: normal;
}

input {
 padding: 5px;
 font-size: 14px;
}

/* サイトヘッダー */

.nav-bar {
 margin-bottom: 1em;
 height: 44px;
 line-height: 44px;
 background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(193,184,143,0.8)),to(rgba(164,150,104,0.8))), url(../img/bg_header.png);
 text-align: center;
 -webkit-box-shadow: 0 1px #FFFFFF;
 box-shadow: 0 1px #FFFFFF;
}

.page-heading {
 margin: 0 auto;
 width: 140px;
 overflow: hidden;
 color: #333333;
 font-weight: bold;
 font-size: 16px;
 text-align: center;
 white-space: nowrap;
 text-shadow: 0 1px #ffffff;
 text-overflow: ellipsis;
}

.page-nav {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
}

.page-nav-left {
 position: absolute;
 top: 0;
 left: 10px;
}

.page-nav-right {
 position: absolute;
 top: 0;
 right: 10px;
}

.page-nav-cart {
 position: absolute;
 top: 0;
 right: 10px;
}

.page-nav-cart img {
 vertical-align: text-top;
}

.page-nav .btn {
 border: 1px solid rgb(164,150,104);
 -webkit-box-shadow: 0 0 2px rgba(255,255,255,0.5);
 box-shadow: 0 1px 2px rgba(255,255,255,0.5);
}

/* セクション、見出し */

.block {
 padding: 0 10px 1em 10px;
}

.sub-heading {
 margin: 0.5em 10px 1.0em 10px;
 padding: 3px 2px;
 background: url(../img/bg_subheading.png) left bottom repeat-x;
}

.block .sub-heading {
 margin: 0.5em 0 1.0em 0;
}

.small-heading {
 margin-bottom: 0.5em;
 font-size: 12px;
}

.title-heading {
 margin-bottom: 0.5em;
 text-align: center;
}

.article-header {
 text-align: center;
}

.article-heading {
 font-size: 16px;
}

/* 画像のスタイル */

.image-frame {
 padding: 5px;
 background-color: #FFFFFF;
 -webkit-border-radius: 6px;
 border-radius: 6px;
}

/* 商品リスト */

.catalog-thumbnail-list:after,
.catalog-list:after {
 display: block;
 clear: left;
 content: '';
}

.catalog-thumbnail-list li,
.catalog-list li {
 text-align: center;
}

.catalog-thumbnail-list li {
 margin-right: 10px;
 margin-bottom: 10px;
 float: left;
 width: 145px;
 font-size: 12px;
}

.catalog-thumbnail-list a {
 display: block;
}

.catalog-thumbnail-list img {
 margin-bottom: 0.5em;
 width: 135px;
 height: 135px;
}

.catalog-list {
 margin-bottom: 10px;
}

.catalog-list a {
 margin: 0 auto;
 display: block;
 width: 240px;
}

.catalog-list img {
 margin-bottom: 0.5em;
 width: 230px;
 height: 230px;
}

/* ボタン */

.btn {
 padding: 4px 8px;
 color: #FFFFFF;
 background-color: rgb(164,150,104);
 background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(193,184,143)),to(rgb(164,150,104)));
 font-size: 14px;
 -webkit-border-radius: 4px;
 border-radius: 4px;
 -webkit-box-shadow: 0 0 3px #FFFFFF;
 box-shadow: 0 0 3px #FFFFFF;
}

.btn-left {
 -webkit-border-top-left-radius: 12px;
 -webkit-border-top-right-radius: 4px;
 -webkit-border-bottom-right-radius: 4px;
 -webkit-border-bottom-left-radius: 12px;
 border-top-left-radius: 12px;
 border-top-right-radius: 4px;
 border-bottom-right-radius: 4px;
 border-bottom-left-radius: 12px;
}

.btn-right {
 -webkit-border-top-left-radius: 4px;
 -webkit-border-top-right-radius: 12px;
 -webkit-border-bottom-right-radius: 12px;
 -webkit-border-bottom-left-radius: 4px;
 border-top-left-radius: 4px;
 border-top-right-radius: 12px;
 border-bottom-right-radius: 12px;
 border-bottom-left-radius: 4px;
}

/* 表 */

.table {
 margin-bottom: 10px;
 background-color: rgba(193,184,143,0.5);
 -webkit-border-radius: 6px;
 border-radius: 6px;
}

.table:after {
 display: block;
 clear: both;
 content: '';
}

.table dt,
.table dd {
 margin-bottom: 1px;
 padding: 4px 6px;
}

.table dt {
 float: left;
 clear: both;
 width: 44px;
 text-align: center;
}

.table dd {
 margin-left: 60px;
 background-color: rgba(255,255,255,0.8);
 text-align: left;
}

.table dd dt,
.table dd dd {
 margin: 0;
 padding: 0;
 display: inline;
 float: none;
 width: auto;
 background: none;
}

.table dd dt:after {
 content: ":"
}

.table dd:first-of-type {
 -webkit-border-top-right-radius: 6px;
 border-top-right-radius: 6px;
}

.table dd:last-of-type {
 -webkit-border-bottom-right-radius: 6px;
 border-bottom-right-radius: 6px;
}

/* フォーム */

input[type="submit"] {
 border: 1px solid #FFFFFF;
 font-size: 16px;
 -webkit-box-shadow: 0 0 3px #333333;
 box-shadow: 0 0 3px #333333;
}

.submit {
 text-align: center;
}

/* サイトフッター */

.global-footer {
 margin-top: 20px;
 padding: 10px;
 background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(193,184,143,0.8)),to(rgba(164,150,104,0.8)));
 font-size: 12px;
 text-align: center;
}

.global-footer li {
 display: inline;
}

.global-footer a {
 margin: 0 3px;
 color: #fff;
}

.copyright {
 margin-bottom: 0;
}

/* 電話 */

.contact-call {
 margin: 10px 0 20px 0;
 color: #fff;
 font-size: 12px;
 text-align: center;
}

.call a {
 padding: 5px 10px;
 border: 1px solid #FFFFFF;
 display: inline-block;
 color: #FFFFFF;
 background-color: #006699;
 background-image: -webkit-gradient(linear, left top, left bottom, from(#66CC00), color-stop(48%, #66B400), color-stop(52%, #66A700), to(#669900));
 font-size: 16px;
 text-align: center;
 -webkit-border-radius: 4px;
 border-radius: 4px;
 -webkit-box-shadow: 0 0 3px #333333;
 box-shadow: 0 0 3px #333333;
}

/*=================================================
 * トップページ
 * ================================================= */

.logo {
 margin-bottom: 1em;
 text-align: center;
}

.tagline {
 margin-bottom: 1em;
 font-size: 12px;
 text-align: center;
}

.event-area {
 margin-bottom: 1em;
 text-align: center;
}

.event-area a {
 margin: 0 auto;
 width: 310px;
 display: block;
}

.event-banner {
 margin-bottom: 0.5em;
}

/* 商品カテゴリナビゲーション */

.category-nav li {
 margin: 0 0 10px 16px;
 float: left;
 width: 60px;
 text-align: center;
}

.category-nav ul:after {
 display: block;
 clear: left;
 content: '';
}

.category-nav img {
 margin-bottom: 6px;
 width: 60px;
 background-color: rgb(164,150,104);
 background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(193,184,143)),to(rgb(164,150,104)));
 -webkit-border-radius: 8px;
 border-radius: 8px;
 -webkit-box-shadow: 0 0 3px #FFFFFF;
 box-shadow: 0 0 3px #FFFFFF;
}

.category-nav a {
 display: block;
 font-size: 13px;
}

.category-nav a:after {
 display: block;
 content: attr(title);
 font-size: 11px;
 text-align: center;
 white-space: nowrap;
}

/* おすすめアクセサリー */

.recommend-area {
 margin-bottom: 1.5em;
 overflow: hidden;
}

.recommend-area ul {
 width: 620px;
 -webkit-animation: scrollX 10s linear infinite alternate;
}

@-webkit-keyframes scrollX {
   0% { margin-left: 0;}
 100% { margin-left: -310px;}
}

/* sun◎sunについて */

.vlist-nav ul {
 -webkit-border-radius: 8px;
 border-radius: 8px;
 -webkit-box-shadow: 0 0 3px #FFFFFF;
 box-shadow: 0 0 3px #FFFFFF;
}

.vlist-nav li {
 height: 44px;
 line-height: 44px;
 background-color: rgb(164,150,104);
 background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(193,184,143)),to(rgb(164,150,104)));
}

.vlist-nav li:first-child {
 -webkit-border-top-right-radius: 8px;
 -webkit-border-top-left-radius: 8px;
 border-top-right-radius: 8px;
 border-top-left-radius: 8px;
}

.vlist-nav li:last-child {
 -webkit-border-bottom-left-radius: 8px;
 -webkit-border-bottom-right-radius: 8px;
 border-bottom-right-radius: 8px;
 border-bottom-left-radius: 8px;
}

.vlist-nav a {
 padding: 0 24px 0 14px;
 display: block;
 overflow: hidden;
 color: #FFFFFF;
 background: url(../img/nav_list.png) right center no-repeat;
 white-space: nowrap;
 text-overflow: ellipsis;
}


/*=================================================
 * 商品一覧ページ
 * ================================================= */

/* 商品の並び順 */

.hlist-nav ul {
 height: 38px;
 line-height: 38px;
}

.hlist-nav ul:after {
 display: block;
 clear: both;
 content: '';
}

.hlist-nav li {
 float: left;
 width: 100px;
 font-size: 12px;
 text-align: center;
}

.hlist-nav li a {
 display: block; 
 color: #FFFFFF;
 background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(193,184,143)),to(rgb(164,150,104)));
 -webkit-box-shadow: 0 0 3px #FFFFFF;
 box-shadow: 0 0 3px #FFFFFF;
}

.hlist-nav li a.selected {
 color: #440A0A;
 background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(240,240,240)),to(rgb(255,255,255)));
}

.hlist-nav li:first-child a {
 -webkit-border-top-left-radius: 8px;
 -webkit-border-bottom-left-radius: 8px;
 border-top-left-radius: 8px;
 border-bottom-left-radius: 8px;
}

.hlist-nav li:last-child a {
 -webkit-border-top-right-radius: 8px;
 -webkit-border-bottom-right-radius: 8px;
 border-top-right-radius: 8px;
 border-bottom-right-radius: 8px;
}


/* フリックアニメーション */

.jCarousel {
 margin-bottom: 15px;
 -webkit-transition: margin 0.5s ease-in-out;
 transition: margin 0.5s ease-in-out; 
}

/* ページ移動 */

.page-footer-nav {
 position: relative;
}

/*=================================================
 * 商品詳細ページ
 * ================================================= */

/* メイン写真と詩 */

.product-image {
 margin: 0 auto;
 position: relative;
 width: 240px;
 height: 280px;
 text-align: center;
 -webkit-perspective: 800;
}

.product-picure {
 margin-left: -120px;
 position: absolute;
 top: 0;
 left: 50%;
 -webkit-transform-style: preserve-3d;
 -webkit-backface-visibility: hidden;
}

.product-name {
 position: absolute;
 bottom: 10px;
 width: 240px;
}

.product-poem {
 margin-left: -120px;
 position: absolute;
 top: 0;
 left: 50%;
 width: 240px;
 line-height: 18px;
 background: url(../img/bg_poem.png) center;
 font-size: 14px;
 -webkit-border-radius: 6px;
 border-radius: 6px;
 -webkit-transform-style: preserve-3d;
 -webkit-backface-visibility: hidden;
}

.product-poem-layout {
 padding: 5px;
 display: table-cell;
 width: 230px;
 height: 230px;
 vertical-align: middle;
}

.flip-front {
 -webkit-animation: flipFront 8s ease-out infinite alternate;
}

.flip-back {
 -webkit-animation: flipBack 8s ease-out infinite alternate;
}

@-webkit-keyframes flipFront {
   0% { -webkit-transform: rotateY(0deg);}
  45% { -webkit-transform: rotateY(0deg);}
  55% { -webkit-transform: rotateY(180deg);}
 100% { -webkit-transform: rotateY(180deg);}
}

@-webkit-keyframes flipBack {
   0% { -webkit-transform: rotateY(180deg);}
  45% { -webkit-transform: rotateY(180deg);}
  55% { -webkit-transform: rotateY((0deg);}
 100% { -webkit-transform: rotateY((0deg);}
}

/* 商品価格・仕様 */

.price {
 font-weight: bold;
}

.attention {
 margin-bottom: 0;
 display: block;
 opacity: 0.8;
}

/* カートに入れる */

.buy {
 padding: 12px 8px;
 width: 280px;
 background-image: url(../img/nav_cart.png), -webkit-gradient(linear, left top, left bottom, from(rgb(193,184,143)),to(rgb(164,150,104)));
 background-repeat: no-repeat, no-repeat;
 background-position: 16px center, left center;
}

/* お問い合わせリンク */

.nav-mail {
 padding-left: 20px;
 position: absolute;
 right: 10px;
 background: url(../img/nav_mail.png) left center no-repeat;
}

/*=================================================
 * お問い合わせ
 * ================================================= */

input[type="email"] {
 width: 200px;
}

/*=================================================
 * 作家紹介
 * ================================================= */

.figure-left {
 margin: 0 10px 10px 0;
 float: left;
 text-align: center;
}

.figure-left img {
 margin-bottom: 0.5em;
}

/*=================================================
 * イベント情報
 * ================================================= */

.googlemap {
 overflow: scroll;
 border: none;
 width: 100%;
 height: 300px;
}