@charset "UTF-8";

/* =========================================================

 base styles

========================================================= */
html {
	font-family: "ＭＳ Ｐゴシック", Osaka;
	font-size: 81.25%;
	color: #444;
	text-align: left;
	line-height: 150%;
	margin: 0;
	padding: 0;
}
body#home {
	width: 100%;
	height: 100%;
	text-align: center;
	background-color: #FFFFFF;
}
body#concept {
	background: url(../../concept/images/bg_concept.gif) left top repeat-y;
	background-color: #e5e5e5;
}
body#productsIndex {
	background: url(../../products/images/bg_products_index.gif) left top repeat-y;
	background-color: #e5e5e5;
}
body#products {
	background: url(../../products/images/bg_products.gif) left top repeat-y;
	background-color: #e5e5e5;
}
body#event {
	background: url(../../event/images/bg_event.gif) left top repeat-y;
	background-color: #e5e5e5;
}
body#shop {
	background: url(../../shop/images/bg_shop.gif) left top repeat-y;
	background-color: #e5e5e5;
}
body#contact {
	background: url(../../contact/images/bg_contact.gif) left top repeat-y;
	background-color: #e5e5e5;
}
body#sitemap {
	background: url(../../sitemap/images/bg_sitemap.gif) left top repeat-y;
	background-color: #e5e5e5;
}
body#popup {
	text-align: center;
	background-color: #FFFFFF;
}

html,
body,
h1,
h2,
h3,
h4,
h5,
h6,
img,
p,
form,
div,
ul,
ol,
li,
dl,
dt,
dd,
table,
tr,
td,
address {
	margin: 0;
	padding: 0;
}
h1,
h2,
h3,
h4,
h5 {
	font-size: 1;
	line-height: 1;
}
img {
	font-size: 0;
	line-height: 0;
	letter-spacing: 0;
	margin: 0;
	padding: 0;
	vertical-align: bottom;
}
a img {
	border: none;
}
ul {
	list-style-type: none;
}

/* ---------------------------------------------------------
	行末の均等割り付け
--------------------------------------------------------- 
p {
	text-align: justify;
	text-justify: inter-ideograph;
	margin: 0 0 15px 0;
}
*/

/* ---------------------------------------------------------
	text
--------------------------------------------------------- */
.small {
	font-size: 0.8em;
}
.big {
	font-size: 1.2em;
}
.red {
	color: #FF0000;
}

/* ---------------------------------------------------------
	link
--------------------------------------------------------- */
a {
	text-decoration: none;
}
a:link {
	color: #346092;
	text-decoration: none;
}
a:visited {
	color: #346092;
	text-decoration: none;
}
a:hover {
	text-decoration: underline;
}
a:active {
	text-decoration: underline;
}
/* ------------------------------------------------------ */
.center {
	text-align: center; 
}
.floatL {
	float: left;
}
.floatR {
	float: right;
}
.clear {
	clear: both;
}
.clearfix:after {
	content:".";
	display:block;
	clear:both;
	height:0;
	visibility:hidden;
}
.clearfix {
	display:inline-block;
}
/* ---------------------------------------------------------
			margin top
--------------------------------------------------------- */
.top-10 {
	margin-top: 10px;
}
.top-20 {
	margin-top: 20px;
}
.top-30 {
	margin-top: 30px;
}
.top-35 {
	margin-top: 35px;
}
.top-40 {
	margin-top: 40px;
}
/* ---------------------------------------------------------
			margin right
--------------------------------------------------------- */
.right-40 {
	margin-right: 40px;
}
/* ---------------------------------------------------------
			margin left
--------------------------------------------------------- */
.left-20 {
	margin-left: 20px;
}
.left-40 {
	margin-left: 40px;
}
/* ---------------------------------------------------------
			margin bottom
--------------------------------------------------------- */
.bottom-10 {
	margin-bottom: 10px;
}
.bottom-15 {
	margin-bottom: 15px;
}
.bottom-20 {
	margin-bottom: 20px;
}
.bottom-40 {
	margin-bottom: 40px;
}
/* ---------------------------------------------------------
			header
--------------------------------------------------------- */
#header {
	width: 100%;
	height: 140px;
	background: url(../images/bg_header.gif) left top repeat-x;
}
#headerBox {
	width: 960px;
	height: 90px;
}
#headerBox p#headerText {
	font-size: 0.8em;
	color: #aaa;
	margin: 30px 0 0 20px;
	padding: 0;
}
#headerPopup {
	width: 100%;
	height: 74px;
	background: url(../images/bg_pu_header.gif) left top repeat-x;
}
#headerPopupBox {
	width: 660px;
	text-align: left;
	margin: 0 auto;
}

/* ---------------------------------------------------------
			headernavi
--------------------------------------------------------- */
#headerNavi {
	width: 397px;
	height: 36px;
	margin: 7px;
}
#headerNavi li {
	float: left;
	font-size: 0;
	line-height: 0;
	vertical-align: bottom;
	margin: 0;
	padding: 0;
}
/* ---------------------------------------------------------
			globalnavi
--------------------------------------------------------- */
#globalNavi {
	width: 960px;
	height: 50px;
}
#globalNavi h2 {
	display: none;
}
#globalNavi li {
	float: left;
	width: 192px;
	font-size: 0;
	line-height: 0;
	vertical-align: bottom;
}
/* ---------------------------------------------------------
			subnavi
--------------------------------------------------------- */
#subnavi {
	width: 746px;
	height: 30px;
	background: url(../images/bg_subnavi.gif) left no-repeat;
}
#subnavi li {
	float: left;
	font-size: 0;
	line-height: 0;
	vertical-align: bottom;
}

/* ---------------------------------------------------------
			contents
--------------------------------------------------------- */
#contents {
	width: 960px;
	margin-bottom: 80px;
}
#contents02 {
	width: 960px;
	margin: 0;
}
#contentsLeft {
	width: 214px;
	float: left;
}
#contentsRight {
	width: 746px;
	float: right;
}
.contentsBox{
	width: 666px;
	margin-left: 40px;
}.contentsBox626{
	width: 626px;
}
.contentsBox323{
	width: 323px;
	margin-bottom: 20px;
}
.contentsBox301{
	width: 301px;
}
.contentsGrayBox01{
	border: 1px solid #cccccc;
}
.contentsGrayBox02{
	padding: 20px;
	border: 1px solid #ffffff;
	background-color: #e5e5e5;
}
#contentsPopup {
	width: 700px;
	text-align: left;
	margin: 0 auto;
}
/* ---------------------------------------------------------
			pagetop
--------------------------------------------------------- */
.pageTop {
	clear: both;
	width: 960px;
	text-align: right;
}
a.top {
	display: none;
}
/* ---------------------------------------------------------
			footer
--------------------------------------------------------- */
#footer {
	width: 960px;
	height: 130px;
	background: url(../images/bg_footer.gif) left top no-repeat;
}
#footerBox {
	width: 880px;
	margin: 0 0 0 40px;
}
#footerBox address {
	margin: 58px 0 0 0;
	padding: 0;
}
#footerPopup {
	width: 100%;
	height: 80px;
	background: url(../images/bg_pu_footer.gif) left top repeat-x;
}
#footerPopupBox {
	width: 660px;
	height: 80px;
	text-align: left;
	margin: 0 auto;
}
#footerPopupBox address {
	margin: 33px 0 0 0;
	padding: 0;
}
/* ------------------------------------------------------ */










/* =========================================================

 page styles

========================================================= */

/* ---------------------------------------------------------
			concept
--------------------------------------------------------- */

.concept-origin-img {
	width: 276px;
	margin: 0 0 20px 0;
}
.concept-origin-text {
	width: 410px;
	margin: 40px 0 20px 20px;
}

.concept-photo{
	width: 240px;
	margin: 0 0 40px 0;
}
.concept-text{
	width: 410px;
	margin: 0 0 40px 0;
}
/* ---------------------------------------------------------
			products
--------------------------------------------------------- */
#productsFlash {
	width: 960px;
	height: 410px;
}
#productsDoorBtn {
	width: 880px;
	height: 70px;
	margin: 0 0 0 40px;
	padding: 15px 0 0 0;
	text-align: center;
	background: url(../../products/images/bg_door_btn.gif) top no-repeat;
}
#productsBtn {
	width: 670px;
	margin: 0 0 0 38px;
}
#productsBtn li {
	float: left;
	font-size: 0;
	line-height: 0;
	vertical-align: bottom;
	margin: 0;
	padding: 0;
}
.productText {
	width: 356px;
	margin: 0 0 0 40px;
}
.productPhoto {
	width: 746px;
	background-color: #0d0d0d;
}
.productPhoto ul {
	margin: 10px 0 0 40px;
}
.productPhoto li {
	float: left;
	font-size: 0;
	line-height: 0;
	vertical-align: bottom;
	margin: 0;
	padding: 0 10px 10px 0;
}
/* art */
/* ------------------------------------------------------ */
#productEssence {
	width: 746px;
	padding: 40px 0 40px 0;
	background: url(../../products/images/bg_essence.gif) top right no-repeat;
}
#productStyle {
	width: 746px;
	padding: 40px 0 40px 0;
	background: url(../../products/images/bg_style.gif) top left repeat-x;
}
.productStyle-text{
	width: 395px;
}
.productStyle-btn{
	width: 395px;
	height: 40px;
	padding-top: 5px;
	text-align: center;
	background: url(../../products/images/bg_contact.gif) top no-repeat;
}
.productStyle-photo{
	width: 261px;
}
/* shawl and stole */
/* ------------------------------------------------------ */
#productFashion {
	width: 746px;
	margin: 0;
	padding: 40px 0 40px 0;
	background: url(../../products/images/bg_fashion.jpg) top right no-repeat;
}
#productLineBox {
	width: 746px;
	background: url(../../products/images/bg_productLine.gif) top repeat-y;
}
#productBoxLeft{
	width: 373px;
	float: left;
}
#productBoxRight{
	width: 372px;
	float: right;
}
.productBoxLeftBg{
	width: 373px;
	height: 40px;
	padding-top: 5px;
	text-align: center;
	background: url(../../products/images/bg_contentsL_btn.gif) top no-repeat;
	float: left;
}
.productBoxRightBg{
	width: 373px;
	height: 40px;
	padding-top: 5px;
	text-align: center;
	background: url(../../products/images/bg_contentsR_btn.gif) top no-repeat;
	float: right;
}
.productBox293{
	width: 293px;
	margin: 0 0 40px 40px;
}
/* view */
/* ------------------------------------------------------ */
.productView {
	width: 666px;
	margin-bottom: 20px;
}
.productView li {
	float: left;
	font-size: 0;
	line-height: 0;
	vertical-align: bottom;
	margin: 0;
	padding: 0 21px 0 0;
}
.productView li.left20 {
	float: left;
	font-size: 0;
	line-height: 0;
	vertical-align: bottom;
	margin: 0;
	padding: 0 20px 0 0;
}
.productView li.right {
	float: right;
	font-size: 0;
	line-height: 0;
	vertical-align: bottom;
	margin: 0;
	padding: 0;
}
.productData dt {
	float: left;
	width: 75px;
	background: url(../images/line_double.gif) top left repeat-x;
	font-weight: bold;
	text-align: left;
	vertical-align: top;
	padding: 10px 0;
}
.productData dd {
	background: url(../images/line_double.gif) top left repeat-x;
	text-align: left;
	vertical-align: top;
	margin-left: 75px;
	padding: 10px 0;
}

/* ---------------------------------------------------------
			shop
--------------------------------------------------------- */
.shopData dt {
	float: left;
	width: 100px;
	border-top: 1px solid #cccccc;
	font-weight: bold;
	text-align: left;
	vertical-align: top;
	padding: 10px 0;
}
.shopData dd {
	border-top: 1px solid #cccccc;
	text-align: left;
	vertical-align: top;
	margin-left: 100px;
	padding: 10px 0;
}
/* ---------------------------------------------------------
			event
--------------------------------------------------------- */
.event-title {
	width: 225px;
	margin: 0 0 20px 0;
	border-bottom: 1px solid #cccccc;
}
.event-title h4 {
	font-size: 110%;
	line-height: 150%;
	padding: 0 0 10px 0;
}
.event-info {
	width:421px;
	margin: 0 0 20px 0;
}
.event-btn {
	width:421px;
	padding: 5px 0;
	text-align: center;
	background-color: #e5e5e5;
}
.eventTable {
	width: 419px;
	font-size: 100%;
	border: 1px solid #cccccc;
}
.eventTable th {
	width: 47px;
	padding: 10px;
	color: #444444;
	background-color: #e5e5e5;
	border-bottom: 1px solid #cccccc;
}
.eventTable td {
	width: 332px;
	padding: 10px;
	border-bottom: 1px solid #cccccc;
}
.eventTable th.noline {
	width: 47px;
	padding: 10px;
	color: #444444;
	background-color: #e5e5e5;
	border-bottom: none;
}
.eventTable td.noline {
	width: 332px;
	padding: 10px;
	border-bottom: none;
}

.eventList li {
	text-align: left;
	background: url(../images/line_double.gif) bottom left repeat-x;
	padding: 5px 0 5px 0;
}



#eventList li {
	text-align: left;
	background: #303030;
	margin: 0 0 10px 0;
	padding: 5px 0 5px 0px;
}
#eventList a {
	background: url(../images/arrow.gif) no-repeat 10px 50%;
	padding: 0 0 0 20px;
}
#eventList a:hover {
	background: url(../images/arrow2.gif) no-repeat 10px 50%;
}
/* ---------------------------------------------------------
			sitemap
--------------------------------------------------------- */
.smLi {
	width: 666px;
	border: 1px solid #cccccc;
	text-align: left;
	margin: 0 auto 15px auto;
	padding: 10px 0 10px 0px;
}
li.smLi a {
	background: url(../../sitemap/images/arrow.gif) no-repeat 2px 4px;
	text-indent: 0px;
	text-align: left;
	margin: 5px 0 5px 15px;
	padding: 0 0 0 15px;
}
li.smLi a:hover {
	background: url(../../sitemap/images/arrow_ov.gif) no-repeat 2px 4px;
}
li.smLi2 a {
	background: url(../../sitemap/images/arrow.gif) no-repeat 2px 6px;
	text-align: left;
	margin: 5px 0 5px 30px;
	padding: 0 0 0 15px;
}
li.smLi2 a:hover {
	background: url(../../sitemap/images/arrow_ov.gif) no-repeat 2px 6px;
}
/* ---------------------------------------------------------
			contact
--------------------------------------------------------- */
#contactDl dt {
	float: left;
	width: 220px;
	background-image: url(../../contact/images/line10.gif);
	background-position: top;
	background-repeat: repeat-x;
	text-align: left;
	margin: 0;
	padding: 15px;
}
#contactDl dd {
	background-image: url(../../contact/images/line10.gif);
	background-position: top;
	background-repeat: repeat-x;
	text-align: left;
	margin-left: 220px;
	padding: 15px;
}
.submitDl {
	background: url(../../contact/images/line10.gif);
	background-position: top;
	background-repeat: repeat-x;
	text-align: center;
	padding: 10px;
}
/* ---------------------------------------------------------
			form
--------------------------------------------------------- */
.typeText-300{
	width: 300px;
	border: 1px solid #c7c7c7;
}





/* =========================================================

 popup styles

========================================================= */
#puMangrove {
	width: 660px;
	margin-left: 40px;
	background: url(../../concept/images/bg_mangrove.jpg) top right no-repeat;
}
#puMangrove p {
	width: 400px;
	margin: 20px 0;
}
.puMangrove-photo {
	width: 630px;
	margin: 0 0 20px 35px;
}
.puMangrove-photo li{
	width: 210px;
	float: left;
	vertical-align: bottom;
	margin: 0;
	padding: 0;
}
#puClose {
	width: 620px;
	height: 40px;
	margin: 0 0 40px 40px;
	padding: 5px 0 0 0;
	text-align: center;
	background: url(../images/bg_close.gif) left no-repeat;
}
#puPresent {
	width: 620px;
	margin-left: 40px;
}
.puPresent-text {
	width: 360px;
	margin: 40px 0 0 0;
}