@charset "utf-8";

/*

[FILENAME] detail.css

*/


	
/*
content
============================================================*/
	
#ContentDetail{
	text-align:left;
}
#ContentDetail h2{
	margin:25px 0 0 40px;
}

/*
YumYum
============================================================*/	
	/* YumYumArea01 */
	#ContentDetail #YumYumAea01{
		margin:0 0 0 20px;
		padding:40px 0 0 0;
		width:700px;
	}
	#ContentDetail #YumYumAea01 .LeftBox{
		float:left;
		width:309px;
	}
	#ContentDetail #YumYumAea01 .RightBox{
		float:right;
		width:391px;
	}
	#ContentDetail #YumYumAea01 .RightBox .Text{
		margin:25px 0 0 30px;
	}
	#ContentDetail #YumYumAea01 .RightBox .Btn{
		margin:25px 0 0 80px;
	}
	
	/* YumYumArea02 */
	#ContentDetail #YumYumAea02{
		margin:45px 0 0 14px;
		width:701px;
	}
	#ContentDetail #YumYumAea02 .LeftBox{
		float:left;
		width:348px;
		padding:30px 0 0 0;
	}
	#ContentDetail #YumYumAea02 .RightBox{
		float:right;
		width:353px;
		padding:30px 0 0 0;
	}
	#ContentDetail #YumYumAea02 .RightBox .TextBox h4{
		padding:0 0 20px 0;
	}
	#ContentDetail #YumYumAea02 .RightBox .OneSet{
		width:353px;
		min-height:218px;
		_height:218px;
		background:url(../images/yumyum_bgimg_01.gif) no-repeat 0 0;
		margin:100px 0 0 0;
	}
	#ContentDetail #YumYumAea02 .RightBox h4{
		padding:17px 0 0 20px;
	}
	#ContentDetail #YumYumAea02 .RightBox .OneSet .LeftBox{
		width:135px;
		float:left;
		padding:0;
	}
	#ContentDetail #YumYumAea02 .RightBox .OneSet .LeftBox .Photo{
		padding:40px 0 0 23px;
	}
	#ContentDetail #YumYumAea02 .RightBox .OneSet .RightBox{
		width:218px;
		float:right;
		padding:30px 0 0 0;
	}
	#ContentDetail #YumYumAea02 .RightBox .OneSet .RightBox p{
		margin:10px 0 0 0;
		padding:0 20px 0 0;
	}
	
	/* YumYumArea03 */
	#ContentDetail #YumYumAea03{
		margin:50px 0 0 8px;
		width:710px;
	}
	#ContentDetail #YumYumAea03 .LeftBox{
		float:left;
		width:360px;
		padding:40px 0 0 0;
		background:url(../images/yumyum_bgimg_line_01.gif) no-repeat right top;
	}
	#ContentDetail #YumYumAea03 .RightBox{
		float:right;
		padding:40px 0 0 20px;
		width:330px;
		_width:350px;
	}
	#ContentDetail #YumYumAea03 .LeftBox .Text,
	#ContentDetail #YumYumAea03 .RightBox .Text{
		margin:0 0 0 5px;
	}
	#ContentDetail #YumYumAea03 .LeftBox .Photo,
	#ContentDetail #YumYumAea03 .RightBox .Photo{
		margin:15px 0 0 50px;
	}
	#ContentDetail #YumYumAea03 .LeftBox p,
	#ContentDetail #YumYumAea03 .RightBox p{
		margin:15px 0 0 5px;
		width:320px;
	}
	
	/* YumYumArea04 */
	#ContentDetail #YumYumAea04{
		margin:50px 0 0 8px;
		width:710px;
	}
	#ContentDetail #YumYumAea04 .LeftBox{
		float:left;
		width:360px;
		padding:40px 0 0 0;
		background:url(../images/yumyum_bgimg_line_01.gif) no-repeat right top;
	}
	#ContentDetail #YumYumAea04 .RightBox{
		float:right;
		padding:40px 0 0 20px;
		width:330px;
		_width:350px;
	}
	#ContentDetail #YumYumAea04 .LeftBox .Text,
	#ContentDetail #YumYumAea04 .RightBox .Text{
		margin:0 0 0 5px;
	}
	#ContentDetail #YumYumAea04 .LeftBox .Photo,
	#ContentDetail #YumYumAea04 .RightBox .Photo{
		margin:15px 0 0 5px;
	}
	#ContentDetail #YumYumAea04 .LeftBox p,
	#ContentDetail #YumYumAea04 .RightBox p{
		margin:15px 0 0 5px;
		width:320px;
	}
	
/*
MyKitchen
============================================================*/	
	/* MyKitchenArea01 */
	#ContentDetail #MyKitchenAea01{
		margin:0 0 0 20px;
		padding:40px 0 0 0;
		width:700px;
	}
	#ContentDetail #MyKitchenAea01 .LeftBox{
		float:left;
		width:309px;
	}
	#ContentDetail #MyKitchenAea01 .RightBox{
		float:right;
		width:391px;
	}
	#ContentDetail #MyKitchenAea01 .RightBox .Text{
		margin:25px 0 0 30px;
	}
	#ContentDetail #MyKitchenAea01 .RightBox .Btn{
		margin:25px 0 0 80px;
	}
	
	/* MyKitchenArea02 */
	#ContentDetail #MyKitchenAea02{
		margin:45px 0 0 14px;
		width:702px;
	}
	#ContentDetail #MyKitchenAea02 .LeftBox{
		float:left;
		width:320px;
		padding:40px 0 0 0;
		position:relative;
	}
	#ContentDetail #MyKitchenAea02 .LeftBox .Photo{
		margin:20px 0 0 0;
	}

	#ContentDetail #MyKitchenAea02 .LeftBox .Text{
		margin:20px 0 0 0;
	}

	#ContentDetail #MyKitchenAea02 .RightBox{
		float:right;
		width:350px;
		padding:80px 0 20px 0;
	}
	#ContentDetail #MyKitchenAea02 .RightBox .Photo{
		margin:15px 0 0 0;
	}
	
	/* MyKitchenArea03 */
	#ContentDetail #MyKitchenAea03{
		margin:50px 0 0 8px;
		width:710px;
	}
	#ContentDetail #MyKitchenAea03 .LeftBox{
		float:left;
		width:360px;
		padding:0 0 0 0;
		margin:40px 0 0 0;
		background:url(../images/yumyum_bgimg_line_01.gif) no-repeat right top;
	}
	#ContentDetail #MyKitchenAea03 .RightBox{
		float:right;
		padding:0 0 0 20px;
		margin:40px 0 0 0;
		width:330px;
		_width:350px;
	}
	#ContentDetail #MyKitchenAea03 .LeftBox .Photo,
	#ContentDetail #MyKitchenAea03 .RightBox .Photo{
		margin:0 0 0 5px;
	}
	#ContentDetail #MyKitchenAea03 .LeftBox p,
	#ContentDetail #MyKitchenAea03 .RightBox p{
		margin:15px 0 0 5px;
		width:320px;
	}
	
	/* MyKitchenArea04 */
	#ContentDetail #MyKitchenAea04{
		margin:50px 0 0 8px;
		width:710px;
	}
	#ContentDetail #MyKitchenAea04 .LeftBox{
		float:left;
		width:360px;
		padding:0 0 0 0;
		margin:40px 0 0 0;
		background:url(../images/yumyum_bgimg_line_01.gif) no-repeat right top;
	}
	#ContentDetail #MyKitchenAea04 .RightBox{
		float:right;
		padding:0 0 0 20px;
		margin:40px 0 0 0;
		width:330px;
		_width:350px;
	}
	#ContentDetail #MyKitchenAea04 .LeftBox .Photo,
	#ContentDetail #MyKitchenAea04 .RightBox .Photo{
		margin:0 0 0 5px;
	}
	#ContentDetail #MyKitchenAea04 .LeftBox p,
	#ContentDetail #MyKitchenAea04 .RightBox p{
		margin:15px 0 0 5px;
		width:320px;
	}

/*
Kinari
============================================================*/	
	/* KinariArea01 */
	#ContentDetail #KinariAea01{
		margin:0 0 0 20px;
		padding:40px 0 0 0;
		width:700px;
	}
	#ContentDetail #KinariAea01 .LeftBox{
		float:left;
		width:309px;
	}
	#ContentDetail #KinariAea01 .RightBox{
		float:right;
		width:391px;
	}
	#ContentDetail #KinariAea01 .RightBox .Text{
		margin:25px 0 0 30px;
	}
	#ContentDetail #KinariAea01 .RightBox .Btn{
		margin:25px 0 0 80px;
	}
	
	/* KinariArea02 */
	#ContentDetail #KinariAea02{
		margin:45px 0 0 14px;
		width:702px;
	}
	#ContentDetail #KinariAea02 .LeftBox{
		float:left;
		width:520px;
		padding:40px 0 0 0;
	}
	#ContentDetail #KinariAea02 .RightBox{
		float:right;
		width:182px;
		padding:40px 0 20px 0;
	}
	#ContentDetail #KinariAea02 .RightBox .Photo{
		margin:15px 0 0 0;
	}
	#ContentDetail #KinariAea02 .RightBox .Text{
		margin:20px 0 0 0;
	}
	
	/* KinariArea03 */
	#ContentDetail #KinariAea03{
		margin:50px 0 0 8px;
		width:710px;
	}
	#ContentDetail #KinariAea03 .LeftBox{
		float:left;
		width:345px;
		padding:40px 0 0 0;
	}
	#ContentDetail #KinariAea03 .RightBox{
		float:right;
		padding:40px 0 0 0;
		width:365px;
	}
	#ContentDetail #KinariAea03 .RightBox .Photo{
		margin:0 0 0 0;
	}
	#ContentDetail #KinariAea03 .RightBox p{
		margin:15px 0 0 0;
		width:320px;
	}
	
	/* KinariArea04 */
	#ContentDetail #KinariAea04{
		margin:50px 0 0 15px;
		width:702px;
	}
	#ContentDetail #KinariAea04 .LeftBox{
		float:left;
		width:509px;
		padding:40px 0 0 0;
	}
	#ContentDetail #KinariAea04 .RightBox{
		float:right;
		padding:40px 0 0 0;
		width:193px;
	}
	#ContentDetail #KinariAea04 .LeftBox p,
	#ContentDetail #KinariAea04 .RightBox p{
		margin:15px 0 0 0;
	}


/* tabcontainerBottom */
#tab-1,
#tab-2,
#tab-3{
	padding:0 0 10px 0;
	background:url(../images/bgimg_tab_bottom_01.gif) no-repeat left bottom;
}
.tabcontainerBottom{
	margin:0 0 0 0;
	width:730px;
	position:relative;
	top:46px;
}
.tabcontainerBottom ul{
	margin:0 0 0 30px;
}
.tabcontainerBottom li{
	float: left;
	margin:0 5px 0 0;
}
.tabcontainerBottom li img{
	vertical-align:bottom;
}
	
		
/*
tab
============================================================*/
@media projection, screen { 
    .ui-tabs-hide {
        display: none;
    }
}

@media print {
    .ui-tabs-nav {
        display: none;
    }
}

#tabcontainer{
	margin:30px 0 0 40px;
	padding:0 0 30px 0;
	width:730px;
	background:url(../images/bgimg_tab_top_01.gif) no-repeat 0 37px;
}
#tabcontainer p{
	margin:0;
}
#tabcontainer p span{
text-indent:-9999px;
}

/* Skin */
.ui-tabs-nav{
    font-size: 12px;
}
.ui-tabs-nav {
    list-style: none;
    margin: 0;
	padding:0 0 0 30px;
}
.ui-tabs-nav:after { /* clearing without presentational markup, IE gets extra treatment */
    display: block;
    clear: both;
    content: " ";
}
.ui-tabs-nav li {
    float: left;
    margin: 0 5px 0 0;
	width:220px;
    min-width: 220px; /* be nice to Opera */
}
.ui-tabs-nav .tabbg1 a, .ui-tabs-nav .tabbg1 a span {
    display: block;
    padding: 0;
    background: url(../images/tab_01.gif) no-repeat 0 0;
}
.ui-tabs-nav .tabbg2 a, .ui-tabs-nav .tabbg2 a span {
    display: block;
    padding: 0;
    background: url(../images/tab_02.gif) no-repeat 0 0;
}
.ui-tabs-nav .tabbg3 a, .ui-tabs-nav .tabbg3 a span {
    display: block;
    padding: 0;
    background: url(../images/tab_03.gif) no-repeat 0 0;
}


.ui-tabs-nav .tabbg1 a,
.ui-tabs-nav .tabbg2 a,
.ui-tabs-nav .tabbg3 a{
    white-space: nowrap; /* required in IE 6 */    
    outline: 0; /* prevent dotted border in Firefox */
}
.ui-tabs-nav a {
    margin: 1px 0 0; /* position: relative makes opacity fail for disabled tab in IE */
    white-space: nowrap; /* required in IE 6 */    
    outline: 0; /* prevent dotted border in Firefox */
}
.ui-tabs-nav .tabbg1 a:hover {
    color: #333333;
}
.ui-tabs-nav .tabbg2 a:hover {
    color: #333333;
}
.ui-tabs-nav .tabbg3 a:hover {
    color: #333333;
}




.ui-tabs-nav .ui-tabs-selected .tabbg1 a{
    color: #333333;
	height:37px;
	min-height:37px;
	background: url(../images/tab_01_over.gif) no-repeat 0 0;
}
.ui-tabs-nav .ui-tabs-selected .tabbg2 a{
    color: #333333;
	height:37px;
	min-height:37px;
	background: url(../images/tab_02_over.gif) no-repeat 0 0;
}
.ui-tabs-nav .ui-tabs-selected .tabbg3 a{
    color: #333333;
	height:37px;
	min-height:37px;
	background: url(../images/tab_03_over.gif) no-repeat 0 0;
}



.ui-tabs-nav .tabbg1 a span,
.ui-tabs-nav .tabbg2 a span,
.ui-tabs-nav .tabbg3 a span{
    width: 220px; /* IE 6 treats width as min-width */
    min-width: 220px;
	height:37px;
	min-height:37px;
}
*>.ui-tabs-nav .tabbg1 a span { /* hide from IE 6 */
    width: auto;
    height: auto;
}



.ui-tabs-nav .ui-tabs-selected .tabbg1 a span, .ui-tabs-nav .tabbg1 a:hover span, .ui-tabs-nav .tabbg1 a:focus span, .ui-tabs-nav .tabbg1 a:active span {
   background: url(../images/tab_01_over.gif) no-repeat 0 0;
}
.ui-tabs-nav .ui-tabs-selected .tabbg2 a span, .ui-tabs-nav .tabbg2 a:hover span, .ui-tabs-nav .tabbg2 a:focus span, .ui-tabs-nav .tabbg2 a:active span {
   background: url(../images/tab_02_over.gif) no-repeat 0 0;
}
.ui-tabs-nav .ui-tabs-selected .tabbg3 a span, .ui-tabs-nav .tabbg3 a:hover span, .ui-tabs-nav .tabbg3 a:focus span, .ui-tabs-nav .tabbg3 a:active span {
   background: url(../images/tab_03_over.gif) no-repeat 0 0;
}


.ui-tabs-nav .tabbg1 a span, .ui-tabs-nav .ui-tabs-disabled .tabbg1 a:hover span, .ui-tabs-nav .ui-tabs-disabled .tabbg1 a:focus span, .ui-tabs-nav .ui-tabs-disabled .tabbg1 a:active span {
    background: url(../images/tab_01.gif) no-repeat 0 0;
}
.ui-tabs-nav .tabbg2 a span, .ui-tabs-nav .ui-tabs-disabled .tabbg2 a:hover span, .ui-tabs-nav .ui-tabs-disabled .tabbg2 a:focus span, .ui-tabs-nav .ui-tabs-disabled .tabbg2 a:active span {
   background: url(../images/tab_02.gif) no-repeat 0 0;
}
.ui-tabs-nav .tabbg3 a span, .ui-tabs-nav .ui-tabs-disabled .tabbg3 a:hover span, .ui-tabs-nav .ui-tabs-disabled .tabbg3 a:focus span, .ui-tabs-nav .ui-tabs-disabled .tabbg3 a:active span {
   background: url(../images/tab_03.gif) no-repeat 0 0;
}





.ui-tabs-nav .ui-tabs-selected .tabbg1 a:link, .ui-tabs-nav .ui-tabs-selected .tabbg1 a:visited, .ui-tabs-nav .ui-tabs-disabled .tabbg1 a:link, .ui-tabs-nav .ui-tabs-disabled .tabbg1 a:visited,
.ui-tabs-nav .ui-tabs-selected .tabbg2 a:link, .ui-tabs-nav .ui-tabs-selected .tabbg2 a:visited, .ui-tabs-nav .ui-tabs-disabled .tabbg2 a:link, .ui-tabs-nav .ui-tabs-disabled .tabbg2 a:visited,
.ui-tabs-nav .ui-tabs-selected .tabbg3 a:link, .ui-tabs-nav .ui-tabs-selected .tabbg3 a:visited, .ui-tabs-nav .ui-tabs-disabled .tabbg3 a:link, .ui-tabs-nav .ui-tabs-disabled .tabbg3 a:visited{ /* @ Opera, use pseudo classes otherwise it confuses cursor... */
    cursor: pointer;
}
.ui-tabs-nav .tabbg1 a:hover, .ui-tabs-nav .tabbg1 a:focus, .ui-tabs-nav .tabbg1 a:active, .ui-tabs-nav .ui-tabs-unselect .tabbg1 a:hover, .ui-tabs-nav .ui-tabs-unselect .tabbg1 a:focus, .ui-tabs-nav .ui-tabs-unselect .tabbg1 a:active,
.ui-tabs-nav .tabbg2 a:hover, .ui-tabs-nav .tabbg2 a:focus, .ui-tabs-nav .tabbg2 a:active, .ui-tabs-nav .ui-tabs-unselect .tabbg2 a:hover, .ui-tabs-nav .ui-tabs-unselect .tabbg2 a:focus, .ui-tabs-nav .ui-tabs-unselect .tabbg2 a:active,
.ui-tabs-nav .tabbg3 a:hover, .ui-tabs-nav .tabbg3 a:focus, .ui-tabs-nav .tabbg3 a:active, .ui-tabs-nav .ui-tabs-unselect .tabbg3 a:hover, .ui-tabs-nav .ui-tabs-unselect .tabbg3 a:focus, .ui-tabs-nav .ui-tabs-unselect .tabbg3 a:active{ /* @ Opera, we need to be explicit again here now... */
    cursor: pointer;
}
.ui-tabs-disabled {
    opacity: .4;
    filter: alpha(opacity=40);
}
.ui-tabs-loading em {
    padding: 0 0 0 20px;
    background: url(../img/common/loading.gif) no-repeat 0 50%;
}

/* Additional IE specific bug fixes... */
* html .ui-tabs-nav { /* auto clear, @ IE 6 & IE 7 Quirks Mode */
    display: inline-block;
}
*:first-child+html .ui-tabs-nav  { /* @ IE 7 Standards Mode - do not group selectors, otherwise IE 6 will ignore complete rule (because of the unknown + combinator)... */
    display: inline-block;
}