@charset "euc-jp";
/* CSS Document */

/*
Copyright (c) 2010, Yahoo! Inc. All rights reserved.
Code licensed under the BSD License:
http://developer.yahoo.com/yui/license.html
version: 3.3.0
build: 3167
*/
/*
	TODO will need to remove settings on HTML since we can't namespace it.
	TODO with the prefix, should I group by selector or property for weight savings?
*/
html{
	color:#000;
	background:#FFF;
}
/*
	TODO remove settings on BODY since we can't namespace it.
*/
/*
	TODO test putting a class on HEAD.
		- Fails on FF. 
*/
body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
code,
form,
fieldset,
legend,
input,
textarea,
p,
blockquote,
th,
td {
	margin:0;
	padding:0;
}
table {
	border-collapse:collapse;
	border-spacing:0;
}
fieldset,
img {
	border:0;
}
/*
	TODO think about hanlding inheritence differently, maybe letting IE6 fail a bit...
*/
address,
caption,
cite,
code,
dfn,
em,
strong,
th,
var {
	font-style:normal;
	font-weight:normal;
}
/*
	TODO Figure out where this list-style rule is best set. Hedger has a request to investigate.
*/
li {
	list-style:none;
}

caption,
th {
	text-align:left;
}
h1,
h2,
h3,
h4,
h5,
h6 {
	font-size:100%;
	font-weight:normal;
}

q:before,
q:after {
	content:'';
}
abbr,
acronym {
	border:0;
	font-variant:normal;
}
/* to preserve line-height and selector appearance */
sup {
	vertical-align:text-top;
}
sub {
	vertical-align:text-bottom;
}
input,
textarea,
select {
	font-family:inherit;
	font-size:inherit;
	font-weight:inherit;
}
/*to enable resizing for IE*/
input,
textarea,
select {
	*font-size:100%;
}
/*because legend doesn't inherit in IE */
legend {
	color:#000;
}

/* ************************************************ 
 * ------------------------------------------------
 *	Ⅸˇˇ藉幘藉藉m藉帯芥S结³结³结ˇ结ˇ
 * ------------------------------------------------
 * ************************************************ */

/*
Copyright (c) 2010, Yahoo! Inc. All rights reserved.
Code licensed under the BSD License:
http://developer.yahoo.com/yui/license.html
version: 3.3.0
build: 3167
*/
/**
 * Percents could work for IE, but for backCompat purposes, we are using keywords.
 * x-small is for IE6/7 quirks mode.
 */
body {
	font:13px/1.231 arial,helvetica,clean,sans-serif;
	*font-size:small; /* for IE */
	*font:x-small; /* for IE in quirks mode */
}

/**
 * Nudge down to get to 13px equivalent for these form elements
 */ 
select,
input,
button,
textarea {
	font:99% arial,helvetica,clean,sans-serif;
}

/**
 * To help tables remember to inherit
 */
table {
	font-size:inherit;
	font:100%;
}

/**
 * Bump up IE to get to 13px equivalent for these fixed-width elements
 */
pre,
code,
kbd,
samp,
tt {
	font-family:monospace;
	*font-size:108%;
	line-height:100%;
}

 
/* ************************************************ 
 * ------------------------------------------------
 *	\藉幹\结芥p\藉幇结³结³结ˇ结ˇ
 * ------------------------------------------------
 * ************************************************ */

/*--

discrption: default style
date: 2011/01/25

--*/

/* -- common --*/

body {
	background: url(https://yellowglasses.jp//colorme/mango/img/common/mango_bg.jpg) center 28px no-repeat;	
text-align:center;
}

p {
	line-height: 1.5;
}

a:link,
a:visited {
	color: #531a01;
}
	
a:hover,
a:active {
	color: #eb4216;
}	

div#header,div#content {
	margin: 0 auto;
	width: 940px;
	text-align: left;
}

/* -- header -- */

div#header {
	position: relative;
	top: 0;
	left:0;
	height: 230px;
}

div#header p#siteDesc {
position: relative;
top: 165px;
margin: 0 20px;
}

h1#logo,
div#logo {
	position: absolute;
	top: 0;
	left: 0;
}

p#intro {
	position: absolute;
	top: 0;
	left: 160px;
}

p#shipping {
	position: absolute;
	top: 0;
	left: 350px;
	background: #000;
}

p#tel {
	position: absolute;
	top: 33px;
	left: 530px;
	
}

ul#shopMenu {
	position: absolute;
	top: 38px;
	right: 0;
}

ul#shopMenu li.register {
	float: left;
	width: 76px;
}

ul#shopMenu li.login {
	float: left;
	width: 76px;
}

/* -- globalNav -- */

ul#globalNav {
	padding: 10px 0 25px;
	position: absolute;
	top: 110px;
	left: 0;
	background: #fff;
}

ul#globalNav li {
	float: left;
	margin: 0 3px 0 0;
	width: 130px;
}

ul#globalNav li.trivia {
	margin: 0;
}

/*-- utilityNav --*/

ul#utilityNav {
	position: absolute;
	top: 10px;
	right: 15px;
}

ul#utilityNav li {
	display: inline;
	float: left;
	margin: 0 0 0 10px;
	width: 90px;
}

/*-- top --*/

div#mainCamp {
	display: inline;
	margin: 0 0 0 10px;
	float: left;
	width: 630px;
}

div#subCamp {
	float: right;
	width: 290px;
height: 350px;
}

div#topNews {
	margin: 20px 0px;
	background: url(https://yellowglasses.jp//colorme/mango/img/top/top_news.gif) 460px top no-repeat;		
}

div#lovelog {
	float: left;
	width: 450px;
	height: 180px;

}

div#shopNews{
	float: left;
	width: 460px;
	height: 180px;
}

div#shopNews ul{
	margin: 50px 0 20px 30px;
	height: 120px;
overflow: scroll;
}

div#shopNews ul li {
margin: 0 0 5px;
}

div#twitter {
	float: right;
	width: 240px;
	height: 180px;
	background: #FFC;
}

ul#topPickUpMenu {
	clear: both;
	margin: 0 0 0 10px;
	width:930px;
}

ul#topPickUpMenu li {
	margin: 0 15px 10px 0;
	float: left;
	width: 220px;
}

ul#topPickUpMenu li.staff {
	margin: 0;	
}

p#tCampaign {
margin: 0 10px;
}

ul#mSelect {
margin: 10px 0 0 10px;
padding: 10px 0 0;
background: #cb841d;
width: 928px;
}

ul#mSelect li {
margin: 0 7px 0 0;
float: left;
width: 225px;
}

ul#mSelect li.first{
}

/*-- content --*/

div#main {
	margin: 0 0 80px;
	float: right;
	width: 690px;
}

div#side {
	float: left;
	width: 220px;
}

/*-- main --*/

ol#breadCrumb {
	margin: 5px 0 20px;
}

ol#breadCrumb li {
	display: inline;
    list-style-type: none;

}

div#mainBody {
	margin: 20px 0 0 0;
	background: url(https://yellowglasses.jp//colorme/mango/img/about/about_bg_body.gif) left top repeat-y;
}

ul#contentSubNav {

}

ul#contentSubNav li {
	display: inline;
	float: left;
	width: 340px;
}

/*-- sub --*/

ul#pickUp {
	margin: 0 0 10px;
}

ul#pickUp li {
	margin: 0 0 10px;
}

div#list {
	margin: 30px 0;	
}

div#list dl dt {
	margin: 10px 0 0;	
}

ul#pickUpMenu {
	margin: 30px 0;	
}

ul#pickUpMenu li {
	margin: 10px 0 0;
}

/*----------------------------------------------------
	#itemList
----------------------------------------------------*/

div#itemList div.contentNavi {
	margin: 15px 10px 30px 0;
	padding: 30px 10px;
	border: 1px solid #e99705;
}

div.contentNavi p.statusLine {
	float: left;
	margin: 0 15px 0 0;
	width: 100px;
}

div.contentNavi p.modeLine {
	float: right;
	width: 535px;
	text-align: right;
}

div#itemList div.item {
	position: relative;
	float: left;
	margin: 0 10px 0 20px;
	padding: 10px 0 0;
	border-bottom: 3px solid #f98161;
	width: 310px;
}


#main .styleItemList .section .outOfStock {
	position: absolute;
	top: 123px;
	left: 78px;
	z-index: 10;
}

div.item h2 {
	width: 290px;
	margin: 15px 0 10px;
	font-weight: bold;
	line-height: 1.5;
}

div.item p.desc {
	width: 290px;
}

div.item p.photo {
	width: 285px;
	background: #f0ecde;
}

div.item p.price_all {
	margin: 10px 0 0 0;
	padding: 15px 15px 15px;
	font-weight: bold;
	color: #911b14;
}

div.item p.toDetail{
	position: absolute;
	right: 30px;
	bottom: 0px;
	padding: 10px 20px;
	background: #f98161;
	line-height: 1.5;
}

/******************************************

about wez

******************************************/

div#aboutMainBody {
	margin: 20px 0 0 0;
	background: url(https://yellowglasses.jp//colorme/mango/img/about/about_bg_body.gif) left top repeat-y;
}

div#aboutMainBody h2 {
	padding: 40px 0 0;
	background: url(https://yellowglasses.jp//colorme/mango/img/about/about_bg_top.gif) left top no-repeat;
}

p#thatMeans {
	text-align: center;
}

div.appealing {
	margin: 40px 20px 0;
	width: 600px;
 	min-height: 200px;
 	height: auto !important;
 	height: 200px;
}

div.appealing h3 {
	margin: 0 0 15px 20px;
}

div.appealing p {
	margin: 0 20px;
	width: 320px;
	color: #5c3604;
	line-height: 1.5;
}

div#delicious h3 {
	text-align: right;	
}

div#delicious p {
	margin: 0 20px 0 280px
}

div#inexpensive {
	background: url(https://yellowglasses.jp//colorme/mango/img/about/about_inexpensive_bg.jpg) right top no-repeat;
}

div#delicious {
	background: url(https://yellowglasses.jp//colorme/mango/img/about/about_delicious_bg.jpg) left top no-repeat;
}

div#peace {
	background: url(https://yellowglasses.jp//colorme/mango/img/about/about_peace_bg.jpg) right top no-repeat;
}



ul#aboutContentSubNav {
	padding: 60px 0 0 0;
	background: url(https://yellowglasses.jp//colorme/mango/img/about/about_bg_bottom.gif) left top no-repeat;
}

ul#aboutContentSubNav li {
	display: inline;
	float: left;
	width: 340px;
}

/******************************************

obsessiveness

******************************************/

div.obsessivenessSection {
	padding: 0 40px 60px ;
	background: url(https://yellowglasses.jp//colorme/mango/img/about/about_bg_bottom.gif) left bottom no-repeat;
}



/******************************************

staff

******************************************/


ul#staffList {
	position: relative;
	padding: 0 40px 10px;
	height: 570px;
	background: url(https://yellowglasses.jp//colorme/mango/img/about/about_bg_bottom.gif) left bottom no-repeat;
}

ul#staffList li {
	position: absolute;	
}

li.gFather {
	top: 0;
	left: 40px;
}

li.gMother {
	top: 0;
	right: 50px;
}

li.son {
	top: 225px;
	right: 50px;
}

li.daugther {
	top: 165px;
	left: 40px;
}

li.gChild01 {
	top: 377px;
	left: 40px;
}

li.gChild02 {
	top: 377px;
	right: 50px;
}

/******************************************

nourishment

******************************************/


div#main h2.lv2Title {
	padding: 0 0 50px;
	background: #fff url(https://yellowglasses.jp//colorme/mango/img/about/about_bg_top.gif) left bottom no-repeat;
}

div#mangoNourishment {
	margin: 0 40px;
}

div#mangoNourishment div.section {
	margin: 20px 0 0 0;
	border-top: 1px solid #ddd;
	display: inline;
	float: left;
	width: 290px;
}

div#mangoNourishment h3,
div#availability h3 {
	margin: 0 0 10px;
	font-weight: bold;
}

div#mangoNourishment p,
div#availability p {
}

table#ingredients {
	border-top: 1px solid #999;
	border-left: 1px solid #999;
}

table#ingredients th,
table#ingredients td {
	padding: 8px 5px 6px;
	border-right: 1px solid #999;
	border-bottom: 1px solid #999;
	text-align: center;
}

table#ingredients th {
	background: #f5f5f5;
	font-weight: bold;
}

table#ingredients td {
	color: #640;
}

div#mangoNourishment h4 {
	margin: 20px 0 5px;
	color: #ed7206;
	font-weight: bold;
}

div#mangoNourishment div#mangoBetter {
	float: right;	
}

div#mangoBetter dl {
	margin: 0 0 0 0;
	padding: 0;
	border: 3px solid #FC3;
}

div#mangoBetter dl dt {
	margin: 0;
	padding: 5px 0 5px 5px;
	width: 5.2em;
	background: #FC3;
	font-weight: bold;
}

div#mangoBetter dl dd {
	padding: 10px 5px 10px 7.2em;
	margin-left: 0;
	margin-top: -2.1em;
	margin-bottom: -1px;
	line-height: 1.4em;
	border-bottom: 1px dotted #FC3;
}

div#availability {
	margin: 0 20px;
	padding: 60px 20px 0;
	background: url(https://yellowglasses.jp//colorme/mango/img/trivia/nourishment_bg_bottom.gif) left top no-repeat;	
}

div#availability div.section {
	margin : 0 30px 0 0;
	float: left;
	width: 240px;
}

div#availability div.section p {
	margin: 0 0 1.5em;
	color: #4c3300;
}

/******************************************

cut

******************************************/

dl#cutFlow {
	padding: 0 40px 30px;
	background: url(https://yellowglasses.jp//colorme/mango/img/about/about_bg_bottom.gif) left bottom no-repeat;
}

dl#cutFlow dt {

	margin: 0;

	padding: 5px 0 5px 5px;

	width: 150px;

	font-weight: bold;

}

dl#cutFlow dd {

	padding: 5px 5px 80px 200px;

	margin-left: 0;

	margin-top: -10.1em;

	margin-bottom: -1px;
	background: url(https://yellowglasses.jp//colorme/mango/img/trivia/cut/cut_border.gif) left bottom no-repeat;

	line-height: 1.4em;

}

dl#cutFlow dd p {
	margin: 10px 0 0;	
}

dl#cutFlow dd#cutFinish {
	clear: both;
	margin:0;
	padding:0;
	
}

/******************************************

qa

******************************************/


div.qaSection {
	margin: 20px 20px 20px 0;
	padding: 0 0 20px;
	background: #fdf0cf;
}

div.qaSection h2 {
	margin: 10px 0 0;
	padding: 10px 0 10px 45px;
	color: #4f2101;
	background: url(https://yellowglasses.jp//colorme/mango/img/qa/qa_q.gif) left 5px no-repeat;
	font-weight: bold;
}

div.qaSection p {
	margin: 0 20px 0 40px;
	padding: 10px 10px 10px 30px;
	background: #fff url(https://yellowglasses.jp//colorme/mango/img/qa/qa_a.gif) left 5px no-repeat;
}


/******************************************

sitemap

******************************************/


ul#pageList li.lv1 {
	margin: 10px 30px 10px 0;
	padding: 3px 0 0;
	text-indent: 40px;
	background: #fde8b9 url(https://yellowglasses.jp//colorme/mango/img/etc/sitemap_list-title.gif) left top no-repeat;	
}

ul#pageList li.lv2,
ul#pageList li.lv3 {
	padding:  5px 0 0 30px;
	background: #fff  url(https://yellowglasses.jp//colorme/mango/img/etc/sitemap_list-image.gif) 50px 0.3em no-repeat;
}

/******************************************

guide

******************************************/

div.guideSection {
	margin: 20px 0 50px;
}

div.guideSection h2 {
        margin: 0 0 20px;
}

div#delivery table,
div#shop table {
	width: 680px;
	margin: 15px 0 5px 0;
	border-collapse: collapse;
}

div#delivery table th,
div#shop table th {
	width: 200px;
	padding: 10px 15px 20px 0;
	font-weight: normal;
	vertical-align: top;
}

div#delivery table td,
div#shop table td {
	width: 400px;
	padding: 10px 0 20px;
	font-weight: normal;
	vertical-align: top;
}

div#delivery table {
	border-left: 1px solid #dcd4bf;
	border-top: 1px solid #dcd4bf;
} 

div#delivery table th {
	border-right: 1px solid #dcd4bf;
	border-bottom: 1px solid #dcd4bf;
} 

div#delivery table td {
	border-right: 1px solid #dcd4bf;
	border-bottom: 1px solid #dcd4bf;
} 

div#shop table {
	border-bottom: 1px solid #dcd4bf;
}

div#shop table th,
div#shop table td{
	border-top: 1px solid #dcd4bf;
}

div#return p.caution,
div.address dl {
	margin: 20px 0;
}

div#return ul {
	margin: 20px; 0 20x; 20px;
}

div#return ul li {
	list-style-type:disc;
}
/******************************************

farm

******************************************/

div.farmSection {
	margin:0 0 50px 30px;	
}

div.farmSection h3 {
	float: left;
	width: 140px;
}

div.farmSection ol li {
	float: left;	
}

p.farmSean {
padding: 0 30px 20px;
	background: url(https://yellowglasses.jp//colorme/mango/img/about/about_bg_bottom.gif) left bottom no-repeat;
}

ul.social {
margin: 10px 0;
}

ul.social li {
display:inline;
}

div.triviaSection {
margin: 0 0 30px;
padding: 0 30px 40px;
}

div.triviaSection h3 {
margin: 20px;
padding: 10px;
color: #fff;
background: #327d0d;
font-size: 110%;
font-weight: bold;
}

div.triviaSection ul {
margin: 20px;
}

div.triviaSection p {
padding: 0 30px;
line-height:1.5;
}

div.triviaSectionLast {
background: url(https://yellowglasses.jp//colorme/mango/img/about/about_bg_bottom.gif) left bottom no-repeat;
}

/*--footer--*/
div#footer {
	padding: 30px 0 50px;
	color: #fff;
	background: url(https://yellowglasses.jp//colorme/mango/img/common/footer.jpg) repeat-x;
}
#myDiv {
	position:relative;
}

#d1, #d2, #h1, #m1, #s1 {
	position:relative;
	margin-right:10px;
}

#d3, #h2, #m2, #s2 {
	position:relative;
	margin-right:30px;
}

#fancy-countdown {
margin: 10px 80px;
	text-align:center;
	font-family:"Tahoma";
	font-variant:small-caps;
	font-size:24px;

}

#timeReached {
	color:#6C0;
	background-color:#333;
	font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size:60px;	
}
/*-- clearfix --*/

ul#shopMenu,ul#globalMenu,div#content,ul#contentSubNav,ul#aboutContentSubNav,div#mangoNourishment,div#campaign,div#topNews,ul#topPickUpMenu,dl.productNum,div.farmSection,ul#mSelec { /zoom : 1; }
ul#shopMenu:after,ul#globalMenu:after,div#content:after,ul#contentSubNav:after,ul#aboutContentSubNav:after,div#mangoNourishment:after,div#campaign:after,div#topNews:after,ul#topPickUpMenu:after,dl.productNum:after,div.farmSection:after,ul#mSelec:after { content : ''; display : block; clear : both; height:0; }

/* header */
div#header {
    height: 260px;
}

/* ロ〖ルオ〖バ〖箕の瓤拇 */
a:hover img.imgwhite{
    cursor:pointer;
    filter: alpha(opacity=70);        /* ie lt 8 */
    -ms-filter: "alpha(opacity=70)";  /* ie 8 */
    -moz-opacity:0.7;                 /* FF lt 1.5, Netscape */
    -khtml-opacity: 0.7;              /* Safari 1.x */
    opacity:0.7;
    zoom:1;
}