@charset "utf-8";
@import url('pc.css');
@import url('mobile.css');
@import url('https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css');
a{text-decoration: none;}
a:link,a:visited,a:hover,a:active{color:#333;}
.container{
    width:100%; margin: 0 auto;
    overflow: hidden;    
}
.headerWrap{position: relative;}
.backimg{
    width:100%; height: 650px; 
    overflow: hidden;
    z-index: 1; position: relative;
}
.backimg>li{
    position: absolute;
    left:0; top:0; opacity: 0;
    width:100%; height: 100%; 
    background: url('') no-repeat center center/cover;
    transition: all .4s;
}
.backimg>li:nth-child(1){background-image: url('../images/back1.jpg');}
.backimg>li:nth-child(2){background-image: url('../images/back2.jpg');}
.backimg>li:nth-child(3){background-image: url('../images/back3.jpg');}
.backimg>li.topImg{
    z-index:3 !important; opacity: 1; 
    transition: all .4s;
}
#bestProduct>h2{
	width:0; height:0;
	overflow:hidden;
	text-indent:-99999px;
	visibility:hidden;
	display:none;
}
#bestProduct>ul>li a h3{
    font-weight:bold;
    margin: 10px 0;
}
#bestProduct>ul>li a h3{
    font-size:14px;
    line-height:1.3;
}
#bestProduct>ul{
    width:100%;
}
#bestProduct>ul>li{
    height:200px;
    position: relative;
}
#bestProduct>ul>li a{
    position: absolute;
    display: block;
    width: 60%; 
    bottom: 0; padding: 20px;;
}
#bestProduct>ul>li:nth-child(1){
    background:url('../images/icon/fruit01.png') no-repeat lightcoral right top;
}
#bestProduct>ul>li:nth-child(2){
    background:url('../images/icon/fruit02.png') no-repeat lightgray right top;
}
#bestProduct>ul>li:nth-child(3){
    background:url('../images/icon/fruit03.png') no-repeat lightgreen right top;
}
#bestProduct>ul>li:nth-child(4){
    background:url('../images/icon/fruit04.png') no-repeat lightseagreen right top;
}
#snsArea>div>ul>li p{
    text-align: center;
    line-height: 1.6;
    font-size: 12px;
}
h2.title{
    font-size: 28px;
    font-weight: bold;
    text-align: center;
    width: 100%;
}
h2.title + h3{
    font-size: 16px;
    color: #666;
    text-align: center;
    margin: 20px 0;
}
.desc{
    text-align: left;
    margin-top:60px ;
}
.desc h3{
    font-size: 20px;
    font-weight: bold;
    margin: 10px 0;
}
.desc p{
    font-size: 14px;
    color: #000;
    line-height: 2;
    margin: 10px 0;
}
.desc p:last-child{
    background: #222;
    width:180px; height: 45px;
    line-height: 45px;
    text-align: center;
    color: #fff;
    cursor: pointer;
}
#lineBanner{margin: 100px auto 50px;}
#lineBanner>div{overflow: hidden; height: 300px;}
#lineBanner>div:first-child{ width:100%; background:url('../images/banana.jpg') no-repeat center center/cover;}
#lineBanner>div:last-child{background:lightgray; width:100%;}
#lineBanner>div:last-child h3{
    padding: 40px 20px 30px;
    font-size: 24px;
    font-weight: bold;
}
#lineBanner>div:last-child p{
    padding-left:20px;
    line-height: 3;
}
#mdPick>div>ul>li img{width:100%;}
#mdPick>div>ul>li h4{font-weight: bold; margin: 20px 0;}
#mdPick>div>ul>li p{font-size: 14px; line-height: 2;}
.pickPrd>a{
    display: block; position: relative; 
    overflow: hidden; max-height: 330px;
}
.caption{
    position: absolute;
    bottom: -60px; left:0;
    background: rgba(0,0,0,.6);
    width:100%; height: 60px;
    color:#fff;
    line-height: 60px;
    display: block;
    text-align: center;
    transition: all .4s;
}
.pickPrd:hover .caption{bottom:0;}
.pickPrd>a img{width:100%;}
hr{
    width:70%; height: 1px;
    background: #ddd; border: 0;
    margin: 100px auto;
}
#picCircle>.circleWrap .circle_img{
    background: url('') no-repeat center center/cover;
    z-index: 999;
}
#picCircle>.circleWrap:nth-child(1) .circle_img{background-image:url('../images/circle01.png');}
#picCircle>.circleWrap:nth-child(2) .circle_img{
    background-image:url('../images/circle02.png');
    bottom: -80%;
}
#picCircle>.circleWrap:nth-child(3) .circle_img{background-image:url('../images/circle03.png');}
#imgBanner{
    background-image:url('../images/bgimg01.jpg'), url('../images/bgimg02.jpg');
    background-repeat: no-repeat,no-repeat;
    background-position: 30% top, 60% 50%;
    background-size: 40%,70%;
    position: relative;
    z-index: 0; height:900px;
    margin-bottom: 100px;
}
#imgBanner>div{
    position: absolute;
    bottom: 0; left:50%;
    transform: translateX(-50%);
    width:240px; height:240px;
    padding: 20px; color:#fff;
    background:rgba(0, 0, 0, .6);
    box-shadow: 2px 2px 10px crimson;
}
footer{background: aquamarine; height: 300px;}