@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%;
	color: #000000;
}

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/stripe018_2.png);
 font-family: Helvetica, san-serif;
 line-height: 1.6;
 font-size: 14px;
}

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

p {
	margin-bottom: 1em;
	color: #000000;
}

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(255,204,255,0.8)),to(rgba(255,102,255,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;
	font-size: 140%;
}

.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: 198px;
}

.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(255,153,204);
 background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(255,153,204)),to(rgb(255,51,204)));
 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;
}

/* 角丸テーブル1*/

 #xsnazzy { background:transparent; margin:1em; padding:0; }
    #xsnazzy .h, #xsnazzy p {
	margin:0;
	padding:10px 15px;
	color: #000000;
	line-height: 2em;
}
    #xsnazzy .h { font-size:1.5em; color:#60c8d8; padding-bottom:0; font-weight:bold; }
    #xsnazzy .xtop, #xsnazzy .xbottom {display:block; background:transparent; font-size:1px; }
    #xsnazzy b { display:block; overflow:hidden; }
    #xsnazzy .xb1, #xsnazzy .xb2, #xsnazzy .xb3 {height:1px; }
    #xsnazzy .xb2, #xsnazzy .xb3, #xsnazzy .xb4 {background:#FFFFFF; border-left:1px solid #c8ebf9; border-right:1px solid #c8ebf9; }
    #xsnazzy .xb1 { margin:0 5px; background:#c8ebf9; }
    #xsnazzy .xb2 { margin:0 3px; border-width:0 2px; }
    #xsnazzy .xb3 { margin:0 2px; }
    #xsnazzy .xb4 { height:2px; margin:0 1px; }
    #xsnazzy .xboxcontent { display:block; background:#FFFFFF; border:0 solid #c8ebf9; border-width:0 1px; }

/* 角丸テーブル2*/

 #xsnazzy2 {
	background:transparent;
	margin:1em;
	padding:0;
}
    #xsnazzy2 .h, #xsnazzy2 p {
	margin:0;
	padding:1px 3px;
	color: #000000;
	line-height: 2em;
	font-size: 100%;
	font-family: Georgia, Arial, sans-serif;
	text-align: left;
}
    #xsnazzy2 .h { font-size:1.5em; color:#60c8d8; padding-bottom:0; font-weight:bold; }
    #xsnazzy2 .xtop, #xsnazzy2 .xbottom {display:block; background:transparent; font-size:1px; }
    #xsnazzy2 b { display:block; overflow:hidden; }
    #xsnazzy2 .xb1, #xsnazzy2 .xb2, #xsnazzy2 .xb3 {height:1px; }
    #xsnazzy2 .xb2, #xsnazzy2 .xb3, #xsnazzy2 .xb4 {background:#FFFFFF; border-left:1px solid #c8ebf9; border-right:1px solid #c8ebf9; }
    #xsnazzy2 .xb1 { margin:0 5px; background:#c8ebf9; }
    #xsnazzy2 .xb2 { margin:0 3px; border-width:0 2px; }
    #xsnazzy2 .xb3 { margin:0 2px; }
    #xsnazzy2 .xb4 { height:2px;margin:0 1px; }
    #xsnazzy2 .xboxcontent { display:block; background:#FFFFFF;	border:0 solid #c8ebf9; border-width:0 1px; }


/* --- 白黒テーブルテスト表全体 --- */
table.example {
width: 270px; /* 表の幅 */
border: 1px #c0c0c0 solid; /* 大枠の境界線 */
border-collapse: collapse;
font-size: 80%;
}

/* --- 表タイトル --- */
table.example caption {
padding-bottom: 5px; /* 表タイトルの下パディング */
}

/* --- セル --- */
table.example th,
table.example td {
	/* width: 20%; */ /* セルの幅（セルの幅を均等にする場合） */
padding: 6px 8px; /* セルのパディング（上下、左右） */
	font-size: 150%;
	text-align: left;
}

/* --- 奇数列 --- */
table.example col.odd {
	background-color: #FFCCFF; /* 奇数列の背景色 */
}

/* --- 偶数列 --- */
table.example col.even {
	background-color: #FFFFFF; /* 偶数列の背景色 */
}

/* --- 見出しセル --- */
table.example thead th {
text-align: center;
}
table.example thead th.odd {
	background-color: #000000; /* 見出しセルの背景色（奇数列） */
	color: #FFFFFF;
}
table.example thead th.even {
	background-color: #000000; /* 見出しセルの背景色（偶数列） */
	color: #FFFFFF;
}
/* --- 白黒テーブルテスト表全体ここまで --- */


/* --- 白ピンクテーブルテスト表全体 --- */
table.example2 {
	width: 270px; /* 表の幅 */
	border: 1px #c0c0c0 solid; /* 大枠の境界線 */
	border-collapse: collapse;
	font-size: 80%;
	border-radius: 20px;
}

/* --- 表タイトル --- */
table.example2 caption {
padding-bottom: 5px; /* 表タイトルの下パディング */
}

/* --- セル --- */
table.example2 th,
table.example2 td {
	/* width: 20%; */ /* セルの幅（セルの幅を均等にする場合） */
padding: 6px 8px; /* セルのパディング（上下、左右） */
	border: 1px #c0c0c0 solid; /* 大枠の境界線 */
	font-size: 100%;
	text-align: center;
}

/* --- 奇数列 --- */

table.example2 col.odd {
background-color: #ffffff; /* 偶数列の背景色 */
}

/* --- 偶数列 --- */
table.example2 col.even {
	background-color: #FFCCFF; /* 奇数列の背景色 */
}

/* --- 見出しセル --- */
table.example2 thead th {
text-align: center;
}
table.example2 thead th.odd {
background-color: #deefff; /* 見出しセルの背景色（奇数列） */
}
table.example2 thead th.even {
background-color: #edf7ff; /* 見出しセルの背景色（偶数列） */
}
/* --- 白ピンク黒テーブルテスト表全体ここまで --- */


/* --- 白ピンクテーブルテスト２表全体 --- */
table.example3 {
	width: 270px; /* 表の幅 */
	border: 1px #c0c0c0 solid; /* 大枠の境界線 */
	border-collapse: collapse;
	font-size: 80%;
	border-radius: 20px;
}

/* --- 表タイトル --- */
table.example3 caption {
padding-bottom: 5px; /* 表タイトルの下パディング */
}

/* --- セル --- */
table.example3 th,
table.example3 td {
	/* width: 20%; */ /* セルの幅（セルの幅を均等にする場合） */
padding: 6px 8px; /* セルのパディング（上下、左右） */
	border: 1px #c0c0c0 solid; /* 大枠の境界線 */
	font-size: 100%;
	text-align: left;
}

/* --- 奇数列 --- */

table.example3 col.odd {
background-color: #ffccff; /* 偶数列の背景色 */
}

/* --- 偶数列 --- */
table.example3 col.even {
	background-color: #FFFFFF; /* 奇数列の背景色 */
}

/* --- 見出しセル --- */
table.example3 thead th {
text-align: center;
}
table.example3 thead th.odd {
background-color: #deefff; /* 見出しセルの背景色（奇数列） */
}
table.example3 thead th.even {
background-color: #edf7ff; /* 見出しセルの背景色（偶数列） */
}
/* --- 白ピンク黒テーブルテスト２表全体ここまで --- */



/* ボタン */

.demo1 button {
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	text-shadow: 0 -1px 1px #FFF, -1px 0 1px #FFF, 1px 0 1px #aaa;
	-webkit-box-shadow: 1px 1px 2px #E7E7E7;
	-moz-box-shadow: 1px 1px 2px #E7E7E7;
	background: -moz-linear-gradient(top, #fff, #F1F1F1 1%, #F1F1F1 50%, #DFDFDF 99%, #ccc);
 background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255,204,255,0.8)),to(rgba(255,102,255,0.8))), url(../img/bg_header.png);
 text-align: center;
 -webkit-box-shadow: 0 1px #FFFFFF;
 box-shadow: 0 1px #FFFFFF;
}


/* 表 */

.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, color-stop(1.00, #e472c4), color-stop(0.30, #ffb8dd));
background: -webkit-linear-gradient(top, #ffb8dd 30%, #e472c4 100%);
background: -moz-linear-gradient(top, #ffb8dd 30%, #e472c4 100%);
background: -o-linear-gradient(top, #ffb8dd 30%, #e472c4 100%);
background: -ms-linear-gradient(top, #ffb8dd 30%, #e472c4 100%);
background: linear-gradient(top, #ffb8dd 30%, #e472c4 100%);

 font-size: 12px;
 text-align: center;
}

.global-footer li {
 display: inline;
}

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

.copyright {
 margin-bottom: 0;
}

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

.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-image: -webkit-gradient(linear, left top, left bottom, color-stop(1.00, #e472c4), color-stop(0.30, #ffb8dd));
background: -webkit-linear-gradient(top, #ffb8dd 30%, #e472c4 100%);
background: -moz-linear-gradient(top, #ffb8dd 30%, #e472c4 100%);
background: -o-linear-gradient(top, #ffb8dd 30%, #e472c4 100%);
background: -ms-linear-gradient(top, #ffb8dd 30%, #e472c4 100%);
background: linear-gradient(top, #ffb8dd 30%, #e472c4 100%);
}

.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;
	text-shadow: 0 1px #CCC;
	white-space: nowrap;
	text-overflow: ellipsis;
	background-image: url(../img/nav_list.png);
	background-repeat: no-repeat;
	background-position: right center;
}


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

/* 商品の並び順 */

.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;
}



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

.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;
}