@charset "UTF-8";

/*--------------------------------------------------------------------
author: Nandy
email: nandy@nnbros.com
website: http://www.nnbros.com
/--------------------------------------------------------------------*/
/* RESET
----------------------------------------------------------------------------------------------------*/
a, abbr, acronym, address, applet, article, aside, audio, b, big, blockquote, body, caption, canvas, center, cite, code,
dd, del, details, dfn, dialog, div, dl, dt, em, embed, fieldset, figcaption, figure, form, footer, header, hgroup, h1, h2, h3, h4, h5, h6, html, i, iframe, img, ins, kbd, label, legend, li, mark, menu, nav,object, ol, output, p, pre, q, ruby, s, samp, section, small, span, strike, strong, sub, summary, sup, tt, table, tbody, textarea, tfoot, thead, time, tr, th, td, u, ul, var, video  { 
	font-family: inherit; 
	font-size: 100%; 
	font-weight: inherit; 
	font-style: inherit; 
	vertical-align: baseline; 
	white-space: normal;
	text-align: left; 
	margin: 0; 
	padding: 0; 
	border: 0; 
	outline: 0;
	background: transparent; }

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { 
	display: block; }
								  
ol, ul { list-style: none; }

blockquote, q { quotes: none; }

:focus { outline: 0; }

table { 
	border-collapse: collapse; 
	border-spacing: 0; }


/*----------------------------------------------------
	フォントサイズ
----------------------------------------------------*/

/*----------------------------------------------------
基本フォントサイズは13px
個別にサイズを変えたい場合は下記を参考に%で指定する
10px →	77%
11px →	85%
12px →	93%
13px →	100%
14px →	108%
15px →	116%
16px →	124%
17px →	131%
18px →	139%
19px →	147%
20px →	154%
21px →	162%
22px →	169%
23px →	177%
24px →	185%
25px →	192%
26px →	200%
----------------------------------------------------*/

body {
 font-size:13px;
 line-height: 1.6;
 font-family: 'Lucida Grande', 'Verdana', 'Hiragino Kaku Gothic Pro W3', 'ヒラギノ角ゴ Pro W3', 'HiraKakuPro-W3', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', sans-serif;
 background : url("/images/cmn_bg.jpg");
 /*background : none repeat-y top center;*/
 color: #666;
}

/* for IE8 */
	html>/**/body {
		font-size/*\**/: 82%\9;
	}

/* for IE7 */
	*:first-child+html body {
		font-size: 82%;
	}

/* for IE6 */
	* html body {
		font-size: 82%;
	}


/* フロート解除
----------------------------------------------------*/
.clear{
 clear: both;
}
        
/* Start of "Micro clearfix" */
.clearfix { zoom: 1; }
.clearfix:before,
.clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
/* End of "Micro clearfix" */

div { zoom: 1; }
div:before,
div:after { content: ""; display: table; }
div:after { clear: both; }

/*----------------------------------------------------
	リンク設定
----------------------------------------------------*/
a {  
	cursor: pointer;AS
	color: #bd9847;
	text-decoration: none; 
}
a:link {
	color: #bd9847;
	text-decoration: none;
}
a:visited {
	color: #bd9847;
	text-decoration: none;
}
a:hover {
	color: #8e6b24;
	text-decoration: none;
}
a:focus {
	color: #bd9847;
	text-decoration: none;
}
a:active {
	color: #bd9847;
	text-decoration: none;
}
/*----------------------------------------------------
	common setting
----------------------------------------------------*/
p {
 line-height: 1.7;
 padding-bottom: 2em;
}
.fl_left {
  float: left; }

.fl_right {
  float: right; }

.hidden{
 display:none;
}
section#main img{ 
 max-width: 100%;
 height: auto;
 width /***/:auto;
}
.sldfont {font-family: 'TheanoDidotRegular', Arial, sans-serif;}
/*----------------------------------------------------
	レイアウト
----------------------------------------------------*/
.container {
  max-width: 95%;
  margin: 0 auto; }

/*----------------------------------------------------
	ヘッダー
----------------------------------------------------*/
header {
 display: block;
 padding-bottom: 2em;
}
header h1 {
 float: left;
 margin-top: 30px;
 padding-bottom: 20px;
}
header nav#social {
 float: right;
 margin-top: 30px;
}
header nav#social ul li {
 float: left;
}
header nav#social ul li a {
  display: block;
  width: 30px;
  height: 30px;
  overflow: hidden;
  background: url("/images/cmn_menu.png") 0 0;
  text-indent: 100%;
  white-space: nowrap;
}
header nav#social ul li.facebook a:hover { background-position: 0 -30px;}
header nav#social ul li.tumblr a { background-position: -30px 0;}
header nav#social ul li.tumblr a:hover { background-position: -30px -30px;}
header nav#social ul li.twitter a { background-position: -60px 0;}
header nav#social ul li.twitter a:hover { background-position: -60px -30px;}
header nav#global {
 color: #e1d6be;
 clear: both;
 font-family: 'TheanoDidotRegular', Arial, sans-serif;
}
header p#id1 {
 display: none;
}

header nav#global ul li {
 font-size: 93%;
 float: left;
 padding-right: 2em;
 letter-spacing: 1px;
}
header nav#global ul li:last-child {
 padding-right: 0;
}
/*----------------------------------------------------
	メイン共通
----------------------------------------------------*/
section#main {
 clear: both;
 padding-bottom: 2em;
}
section#main h2 {
 line-height: 1;
 font-size: 200%;
 color: #c49e4b;
 padding-bottom: 0.25em;
 font-family: 'TheanoDidotRegular', Arial, sans-serif;
 letter-spacing: 3px;
}
section#main p.title-jp {
 font-weight: bold;
 color: #999999;
}
/*----------------------------------------------------
	フッター
----------------------------------------------------*/
footer {
 clear: both;
}
footer div.line hr {
 width: 100%;
 border: none;
 height: 2px;
 background: url("/images/cmn_line.gif") repeat-x;
 padding-bottom: 2em;
}
footer nav {
 float: left;
}
footer nav ul li {
 float: left;
 font-family: 'TheanoDidotRegular', Arial, sans-serif;
}
footer nav ul li a {
 display: block;
 width: 30px;
 height: 30px;
 overflow: hidden;
 background: url("/images/cmn_menu.png") 0 0;
 text-indent: 100%;
 white-space: nowrap;
}
footer nav ul li.facebook a:hover { background-position: 0 -30px;}
footer nav ul li.tumblr a { background-position: -30px 0;}
footer nav ul li.tumblr a:hover { background-position: -30px -30px;}
footer nav ul li.twitter a { background-position: -60px 0;}
footer nav ul li.twitter a:hover { background-position: -60px -30px;}
footer nav ul li.recruit {
 font-size: 93%;
 letter-spacing: 2px;
}
footer nav ul li.recruit a {
 background: none;
 overflow: visible;
 text-indent: 0;
 padding: 5px 20px;
}

footer section {
 float: right;
 padding-bottom: 1em;
}
footer section p {
 letter-spacing: 1px;
 color: #bd9847;
 font-family: 'TheanoDidotRegular', Arial, sans-serif;
 font-size: 85%;
 text-align: right;
 padding-bottom: 0.7em;
}
footer section p.credit {
 float: right;
 overflow: hidden;
 text-indent: 100%;
 padding-bottom: 0;
}
footer section p.credit a {
 display: block;
 width: 94px;
 height: 8px;
 background: url("/images/cmn_credit.png") 0 0;
}

/*----------------------------------------------------
	トップページ
----------------------------------------------------*/
#top section#main img{ 
 max-width: 100%;
 height: auto;
 width /***/:auto;
}
#top div#top-news {
 clear: both;
 position: relative;
 overflow: hidden;
 height: 50%;
}
#top div#top-news img#news-title { 
 position: absolute;
 bottom: 20px;
 left: 20px;
 z-index: 100;
}
#top div#top-tumblr {
 clear: both;
}
#top div#top-tumblr img#tumblrImg {
 padding-bottom: 1%;
}
#top div#top-tumblr img#tumblr-title {
 position: absolute;
 width: 70%;
 left: 15%;
 top: 16%;
 z-index: 100;
}
#top div.top-social {
 /*margin-top: 3%;*/
}
#top div#top-story {
 margin-top: 4%;
}

#top #intro {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  /*margin-bottom: 2%;*/
}
#top #intro iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

#top #grid01 {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  margin-bottom: 2%;
}
#top #grid01 img {
  display: block;
  height: auto;
  float: left;
  width: 100%;
  border: 0;
}
#top #grid01 iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.grid-half {
 position: relative;
 width: 49%;
}

.grid-half img {
 padding-bottom: 4%;
}
.grid-four {
 width: 48%;
 padding-bottom: 4%;
}
.grid-four img {
 padding-bottom: 0;
}
/*----------------------------------------------------
	STORY
----------------------------------------------------*/
#story section h3 {
 line-height: 1.2;
 font-size: 154%;
 color: #c49e4b;
 padding-bottom: 0.5em;
}
/*----------------------------------------------------
	PATTERN
----------------------------------------------------*/
#pattern #main p.lead {
 clear: both;
}
#pattern #main ul {
 clear: both;
}
#pattern #main ul li {
 width: 14.6%;
 float: left;
 padding: 1%;
}
#pattern #main ul li img {
 border: 1px solid #c49e4b;
 vertical-align: bottom;
}
/*----------------------------------------------------
	ITEM
----------------------------------------------------*/
#item #main h2 {
 padding-bottom: 10px;
}
#item #main #options {
 padding-bottom: 20px;
}
#item #main h3 {
 font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
 /*font-family: 'TheanoDidotRegular', Arial, sans-serif;*/
 line-height: 1.2;
 font-size: 120%;
 color: #999999;
 letter-spacing: 1px;
 float: left;
 padding-right: 30px;
 padding-bottom: 5px;
}
#item #main #options ul {
 float: left;
 font-size: 93%;
}
#item #main #options ul li {
 float: left;
 font-family: 'TheanoDidotRegular', Arial, sans-serif;
}
#item #main #options ul li a {
 background: #e7e7e7;
 display: block;
 padding: 1px 7px;
 margin-right : 5px;
}
#item #main #options ul li a.selected {
 background: #fff;
}
#item #main #options ul li a:hover {
 background: #c49e4b;
 color: #fff;
}
#item #detail {
 position: relative;
 max-width: 660px; /*140426*/
 margin: 0 auto;
}
#item #detail img.main {
 padding-bottom: 1em;
}
#item #detail p.info {
 font-family: 'TheanoDidotRegular', Arial, sans-serif;
 padding-bottom: 10px;
}

#item #item-navi {
 position: relative;
 width: 100%;
 padding-bottom: 20px;
}

/* detail-navi */
#item #item-navi ul#detail-navi {
 display: none; /*非表示*/
 position: absolute;
 top: 0;
 right: 0;
}
#item #item-navi ul#detail-navi li.prev a {
 right: 35px;
 background: url("/story/images/controls.png") no-repeat 0 -32px;
}
#item #item-navi ul#detail-navi li.next a {
 right: 0px;
 background: url("/story/images/controls.png") no-repeat -43px -32px;
}
#item #item-navi ul#detail-navi .prev a:hover {
 background-position: 0 0;
}
#item #item-navi ul#detail-navi .next a:hover {
 background-position: -43px 0;
}
#item #item-navi ul#detail-navi li a {
	position: absolute;
	top: 0px;
	margin-top: -16px;
	outline: 0;
	width: 32px;
	height: 32px;
	text-indent: -9999px;
	z-index: 9999;
 display: block;
}

/* item-back */
#item #item-navi ul#item-back {
 float: left;
 font-size: 93%;
}
#item #item-navi ul#item-back li {
 float: left;
 font-family: 'TheanoDidotRegular', Arial, sans-serif;
}
#item #item-navi ul#item-back li a {
 background: #e7e7e7;
 display: block;
 padding: 1px 7px;
 margin-right : 5px;
}
#item #item-navi ul#item-back li a:hover {
 background: #c49e4b;
 color: #fff;
}

#item div#social {
 text-align: left;
 max-width: 660px; /*140426*/
 margin: 0 auto;
}
#item div#social div {
 float: left;
 /*width: 110px;*/
 padding-right: 4px;
}
#item div#social .twitter-share-button {
 width: 90px !important;
}


/*----------------------------------------------------
	SHOP
----------------------------------------------------*/
#shop div.shop-block {

}
#shop div.line hr {
 width: 100%;
 border: none;
 height: 2px;
 background: url("/images/cmn_line.gif") repeat-x;
 padding-bottom: 2em;
}
#shop div.gallery {
 float: left;
  width: 45%;
 padding-right: 4%;
}
#shop div.gallery h3 {
 font-family: 'TheanoDidotRegular', Arial, sans-serif;
 line-height: 1.2;
 font-size: 120%;
 color: #c49e4b;
 padding-bottom: 5px;
}
#shop div.gallery ul {
 padding-bottom: 5px;
}
#shop div.gallery ul li {
 float: left;
 width: 47%;
 padding: 1.5%;
}
#shop div.gallery ul li img {
 border: 1px solid #c49e4b;
 vertical-align: bottom;
}
#shop div.gallery p.add a {
 text-decoration: underline;
}
#shop ul#online {
 padding-bottom: 2em;
}
#shop ul#online li {
 float: left;
 padding-right: 3%;
}
#shop div.shoplist {
 width: 48%;
}
#shop div#shoplist-left {
 float: left;
}
#shop div#shoplist-right {
 float: right;
}
#shop div.shoplist h4 {
 font-weight: bold;
 font-size: 108%;
 color: #999;
 border-bottom: 1px solid #e3ddd0;
 padding-bottom: 5px;
}
#shop div.shoplist ul {
 margin-top: 10px;
 padding-bottom: 2em;
}
#shop div.shoplist ul.end {
 padding-bottom: 0;
}
#shop div.shoplist ul li {
 padding-bottom: 5px;
}
#shop div.shoplist ul li a {
 text-decoration: underline;
}
/*----------------------------------------------------
	NEWS
----------------------------------------------------*/
#news div#newsLeft {
 float: left;
 width: 65%;
 padding-bottom: 1em;
}
#news div#newsRight {
 float: right;
 width: 25%;
}
#news div#newsRight img {
 border: none;
}
#news h2 span {
 font-size: 70%;
 color: #333;
}
#news h3 {
 color: #333;
 font-weight: bold;
 padding-bottom: 0.5em;
 border-bottom: 1px solid #c49e4b;
}
#news h3 a {
 color: #333;
}


#news section#main div#newsLeft img {
 border: 3px solid #fae8d0;
 margin-bottom: 1em;
}
#news section#main div.articleBox p.titleCredit {
 color: #666;
 font-size: 80%;
 margin-top: 5px !important; 
}
#news section#main div.articleBox p.titleCredit span{
 border-right: 1px solid #666;
 padding-right: 7px;
 margin-right: 7px;
}


#news div.menuBox {
 padding-bottom: 60px;
}
#news div.menuBox p.title {
 font-family: 'TheanoDidotRegular', Arial, sans-serif;
 color: #c49e4b;
 border-top: 1px solid #C09D51;
 border-bottom: 1px solid #C09D51;
 padding: 7px 0;
}
#news div.menuBox ul {
 margin-top: 1em;
}
#news div.menuBox ul li {
 margin-top: 0.5em;
 font-size: 85%;
}

#news div.menuBox li a{
 color: #666;
 text-decoration: underline;
}
#news div.menuBox li a:hover {
 color: #C09D51;
 text-decoration: none;
}
#news div.menuBox ul li span{
 font-weight: bold;
}
#news div.menuBox ul.cateList li img{
 float: left;
 margin-right: 15px;
 border: 5px solid #DDDDDD;
}
#news div#menuBox-drop {
 display: none;
}
#news div#menuBox-drop div {
 margin-top: 1em;
}
#news div#newsPagetop p {
 font-family: 'TheanoDidotRegular', Arial, sans-serif;
}
#news div#menuBoxRss li img{
 float: left;
 margin-right: 5px;
 margin-top: 3px;
}
/*----------------------------------------------------
	580px以下のレイアウト
----------------------------------------------------*/
@media screen and (max-width: 480px) {
  * { -webkit-text-size-adjust: none; }
header {
 padding-bottom: 0.8em;}
header h1 img {
 width: 150px; }
header p#id1 {
 display: block;
 float: right;
 overflow: hidden;
 text-indent: 100%;}
header p#id1 a {
 display: block;
 width: 30px;
 height: 30px;
 background: url("/images/cmn_menu.png") no-repeat -90px 0;
 margin-top: 2em;}
header nav#social {
 display: none;}
header nav#global ul {
 display: none;
 padding-bottom: 0.5em;}
header nav#global ul.open {
 display: block;}
header nav#global ul li {
 float: none;
 border-bottom: 1px solid #ccc;
 padding: 5px;}
header nav#global ul li a {
 display: block;
 width: 100%;}

footer nav, footer section {
 width: 100%;}
footer nav {
 padding-bottom: 20px;}
/*
footer nav ul li {
 float: none;}
footer nav ul li a {
 display: inline;
 background: none;
 overflow: visible;
 white-space: normal;}
footer nav ul li.recruit a { padding: 0;}
*/
footer section p {
 text-align: left;}
footer section p.credit {
 float: left;}

section#main h2 {
 font-size: 175%;}


.grid-half {
 width: 100%;}

#story section h3 {
 font-size: 150%;}

#news div#newsLeft, #news div#newsRight {
 width: 100%;}
#news div.pagebute {
 padding-bottom: 2em;}
#news div.menuBox {
 padding-bottom: 1em;}
#news div#menuBox-arch {
 display: none;}
#news div#menuBox-drop {
 display: block;}
#news div#menuBoxRss {
 display: none;}
#news div#menuBox-banner {
 display: none;}


#pattern #main ul li {
 width: 29.5%;
 padding: 1.7%;}
#shop div.gallery {
  width: 100%;}
#shop ul#online li {
 float: none;
 padding-bottom:5px;}
#shop div.shoplist {
 width: 100%;}
}

@media screen and (min-width: 1024px) {
.container {
 max-width: 940px; } }


/*----------------------------------------------------
	ENTRANCE MOVIE
----------------------------------------------------*/
#top p.enter {
 letter-spacing: 4px;
 font-size: 120%;
 font-weight: normal;
 text-decoration: none;
 font-family: 'TheanoDidotRegular', Arial, sans-serif;
 padding-bottom: 0;
 margin-top: 1.5em;
 text-align: center;
}
#top p.enter a {
 border-bottom: 1px solid #bd9847;
 padding-bottom: 1px;
}
#top p.enter a:hover {
 border-bottom: 1px solid #8e6b24;
}