#wrapAll {
    position: relative;
    width: 100%;
    min-width: 980px;
    font-family: "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", 'Noto Sans Japanese', "メイリオ", Meiryo, sans-serif;
    padding: 0 0 200px;
    background: url(../img/bg.jpg) no-repeat center top;
    -moz-background-size:cover;
    background-size:cover;
    background-attachment:fixed;
    overflow: hidden;
    padding-bottom: 400px;
}

#wrapAll:after {
    content: "";
    display: block;
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 230px;
    background: url(../img/bottom_cloud.png) repeat-x 50% 0;
}

.hide-text {
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
}

#topInner:after {
    content: "";
    display: block;
    clear: both;
}

/*--------------------------------------
header
---------------------------------------*/
#header {
    width: 100%;
}

#head_top {
    width: 980px;
    margin: 0 auto;
    padding: 12px 0 10px;
}

#head_logo {
    float: left;
    width: 235px;
    height: 37px;
    background: url(http://www.rakuten.ne.jp/gold/bellevie-harima/c/ibonoito/img/logo.png) no-repeat;
}

#head_logo a {
    display: block;
}

#top_info {
    float: right;
    position: relative;
    top: 20px;
}

#top_info li {
    float: left;
    margin-left: 10px;
    font-size: 13px;
    font-size: 0.85rem;
}

#top_info li a {
    color: #FFFFFF;
}

#head_top:after {
    content: "";
    clear: both;
    height: 0;
    display: block;
    visibility: hidden;
}

/*--------------------------------------
top
---------------------------------------*/
#top {
    position: relative;
    width: 980px;
    margin: 0 auto;
}

#topInner {
    position: relative;
    width: 100%;
    background: #0066B3;
    margin-bottom: 100px;
}

#topInner:after {
    content: "";
    display: block;
    position: absolute;
    bottom: -20px;
    width: 100%;
    height: 20px;
    background: url(../img/bottom_blue.png) repeat-x 50% 0;
}

#topInner .text {
    width: 95%;
    margin: 0 auto;
    padding: 25px 0;
    text-align: left;
    font-size: 14px;
    font-size: 0.9rem;
    color: #fff;
    clear: both;
}

.top_title {
    float: left;
    width: 335px;
    height: 400px;
    background: url(../img/top_title.gif) no-repeat 50% 0;
}

.top_left {
    position: absolute;
    top: 5px;
    left: -500px;
    width: 580px;
    height: 820px;
    background: url(../img/top_left.png) no-repeat;    
}

.top_right {
    position: absolute;
    top: -10px;
    right : -600px;
    width: 655px;
    height: 770px;
    background: url(../img/top_right.png) no-repeat;    
}


/*----- スライダー -----*/
.top_slide {
    float: left;
    width: 645px;
    height: 400px;
}

/* ドット */
.slick-dots li {
    margin: 0 3px;
}

.slick-dots li button:before {
    top: -60px;
    color: #fff;
    font-size: 15px;
    opacity: 1; 
}

.slick-dots li.slick-active button:before {
    color: #0066B3;
    opacity: 1; 
}

/* 矢印 左 */
.slick-prev {
    top: 43%;
    left: 0;
    z-index: 999;
}

.slick-prev:before {
    content: "";
    display: block;
    width: 38px;
    height: 77px;
    background: url(../img/arrow_left.png) no-repeat;

}

/* 矢印 右 */
.slick-next {
    top: 43%;
    right: 18px;
    z-index: 999;
}

.slick-next:before {
    content: "";
    display: block;
    width: 38px;
    height: 77px;
    background: url(../img/arrow_right.png) no-repeat;

}


/*----- ナビゲーション -----*/
.top_navi {
    position: relative;
    width: 920px;
    margin: 20px auto 0;
}

.top_navi ul:after {
    content: "";
    display: block;
    clear: both;
}

.top_navi ul li {
    position: relative;
    float: left;
    box-sizing: border-box;
    margin-bottom: 30px;
    margin-right: 25px;
    width: 210px;
    height: 150px;
    background: #fff;
    border-radius: 10px;
    -webkit-border-radius: 10px; /* Safari,Google Chrome用 */  
    -moz-border-radius: 10px; /* Firefox用 */
}

#n_guide {
    height: 70px;  
}

#n_guide {
    width: 100%;
    background: #FFFF00;
}

.top_navi ul li:nth-child(4n+4),
.top_navi ul li:last-child {
    margin-right: 0;
}

/* 揖保乃糸 */
#n_ibo .linkname:before {
    content: "";
    display: block;
    position: absolute;
    bottom: 52px;
    left: 45px;
    width: 115px;
    height: 79px;
    background: url(../img/navi_icon.png) no-repeat 0 -36px;
}

/* ジュース・コーヒー */
#n_drink .linkname:before {
    content: "";
    display: block;
    position: absolute;
    bottom: 52px;
    left: 45px;
    width: 115px;
    height: 115px;
    background: url(../img/navi_icon.png) no-repeat -125px 0;
}

/* ゼリー・焼き菓子 */
#n_sweets .linkname:before {
    content: "";
    display: block;
    position: absolute;
    bottom: 52px;
    left: 45px;
    width: 115px;
    height: 108px;
    background: url(../img/navi_icon.png) no-repeat -250px -7px;
}

/* ハム */
#n_ham .linkname:before {
    content: "";
    display: block;
    position: absolute;
    bottom: 52px;
    left: 28px;
    width: 151px;
    height: 84px;
    background: url(../img/navi_icon.png) no-repeat -376px -31px;
}

/* アイスクリーム */
#n_ice .linkname:before {
    content: "";
    display: block;
    position: absolute;
    bottom: 52px;
    left: 28px;
    width: 140px;
    height: 112px;
    background: url(../img/navi_icon.png) no-repeat 0 -135px;
}

/* グルメ */
#n_gourmet .linkname:before {
    content: "";
    display: block;
    position: absolute;
    bottom: 52px;
    left: 16px;
    width: 178px;
    height: 117px;
    background: url(../img/navi_icon.png) no-repeat -145px -134px;
}

/* 洗剤 */
#n_detergent .linkname:before {
    content: "";
    display: block;
    position: absolute;
    bottom: 52px;
    left: 34px;
    width: 145px;
    height: 111px;
    background: url(../img/navi_icon.png) no-repeat -325px -134px;
}

/* カタログギフト */
#n_catalog .linkname:before {
    content: "";
    display: block;
    position: absolute;
    bottom: 52px;
    left: 52px;
    width: 103px;
    height: 108px;
    background: url(../img/navi_icon.png) no-repeat -476px -134px;
}

.linkname {
    display: block;
    position: absolute;
    bottom: 4px;
    right: 0;
    width: 210px;
    font-weight: bold;
    font-size: 19px;
    font-size: 1.2rem;
}

#n_guide .linkname {
    width: 100%;
    display: block;
    position: absolute;
    bottom: 4px;
    right: 0;
    font-weight: bold;
    font-size: 19px;
    font-size: 1.2rem;
}

.linkname:after {
    content: "\f0d7";
    font-family: 'FontAwesome';
    display: block;
    color: #0071BC;
    font-size: 27px; 
    font-size: 1.7rem;
    margin-top: -5px
}

/* hover bob */
.hvr-icon-bob {
    padding: 0;
}

.hvr-icon-bob:before {
  content: "";
  position: absolute;
  right: 0;
  padding: 0;
  font-family: FontAwesome;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}

/*--------------------------------------
content
---------------------------------------*/
.content {
    position: relative;
    width: 980px;
    margin: 0 auto 80px;
    padding-top: 50px;
}

.contentInner {
    position: relative;
    box-sizing: border-box;
    width: 100%;
    margin: 10px auto 0;
    padding: 30px 0 0 0;
    background: #fff;
}

.contentInner:after {
    content: "";
    display: block;
    position: relative;
    bottom: -20px;
    width: 100%;
    height: 20px;
    background: url(../img/bottom_white.png) no-repeat; 
    clear: both;
}

.content .title {
    width: 100%;
    margin-bottom: 20px;
    opacity: 0;
}

/* ランキング */
#rank .contentInner {
    margin: 0;
}

#rank .title {
    height: 90px;
    background: url(../img/title_ran.jpg) no-repeat;
    margin-bottom: 0;
    opacity: 1;
}

/* 揖保乃糸 */
#ibo .title {
    height: 90px;
    background: url(../img/title_ibo.png) no-repeat;  
}

/* ジュース・コーヒー */
#drink .title {
    height: 115px;
    background: url(../img/title_dri.png) no-repeat;  
}

/* ゼリー・焼き菓子 */
#sweets .title {
    height: 108px;
    background: url(../img/title_swe.png) no-repeat;  
}

/* ハム */
#ham .title {
    height: 96px;
    background: url(../img/title_ham.png) no-repeat;  
}

/* アイスクリーム */
#ice .title {
    height: 92px;
    background: url(../img/title_ice.png) no-repeat;  
}

/* グルメ */
#gourmet .title {
    height: 90px;
    background: url(../img/title_gou.png) no-repeat;  
}

/* 洗剤 */
#detergent .title {
    height: 90px;
    background: url(../img/title_det.png) no-repeat;  
}

/* カタログギフト */
#catalog .title {
    height: 121px;
    background: url(../img/title_cat.png) no-repeat;  
}

/*----- コチラもチェック -----*/
.feature {
    position: relative;
    width: 100%;
    margin-bottom: 30px;
}

.feature:before {
    content: "";
    display: block;
    width: 455px;
    height: 50px;
    background: url(../img/check.gif) no-repeat;
    margin: 20px auto 10px;
}

.feature img {
    margin: 0 auto;
    width: 860px;
}

/*
.feature:after {
    content: "";
    position: absolute;
    bottom: 10px;
    right: 70px;
    width: 220px;
    height: 40px;
    background: url(../img/go_feature.png) no-repeat;
}
*/

/* base アイテム */
.box1,
.box2 {
    width: 930px;
    margin: 0 auto 40px;
}

.box4 {
    width: 900px;
    margin: 0 auto 40px;
}

.box2:after,
.box3:after,
.box4:after,
.box5:after {
    content: "";
    display: block;
    clear: both;
}

/* 2列 */
.box2 {
    width: 900px;
}

.box2 > div {
    float: left;
    margin-right: 60px
}

.box2 > div:nth-child(2n+2) {
    margin-right: 0;
}

/* 4列 */
.item .img {
    width: 200px;
    display: block;
    margin: 0 auto 10px;
}

.box4 .item {
    position: relative;
	float: left;
    box-sizing: border-box;
    width: 200px;
    margin: 0 32px 20px 0;
    text-align: left;
}

.box4 .item:nth-child(4n+4) {
    margin-right: 0;
}

.box4 .item .detail:after {
    content: ">> ご注文はコチラ <<";
    display: block;
    width: 100%;
	background:#ED1516;
    color: #FFFF00;
    border-radius: 5px;
    -webkit-border-radius: 5px; /* Safari,Google Chrome用 */  
    -moz-border-radius: 5px; /* Firefox用 */
    padding: 10px 0;
    margin-top: 5px;
    font-size: 16px;
    font-size: 1rem;
    text-align: center;
}

.box4 .detail .free {
	position: relative;
    display: inline-block;
    width: 90px;
    height: 30px;
    box-sizing: border-box;
    text-align: left;
    padding-left: 7px;
    margin-right: 5px;
	background-color: #C89018;
    font-size: 16px;
    font-size: 1rem;
    color: #fff;
    line-height: 30px;
}

.box4 .detail .free:after {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	z-index: 2;
	border-width: 14px 10px;
	border-style: solid;
	border-color: transparent;
	border-right-color: #fff;
}

.box4 .detail .nofree {
    display: inline-block;
    width: 10px;
    height: 34px;
}


.box4 .detail .discount {
	font-weight: bold;
    font-size: 23px;
    font-size: 1.4rem;
    color: #ED1516;
}

.box4 .detail .name {
    margin-top: 5px;
    width: 100%;
    min-height: 50px;
	font-weight: bold;
    font-size: 16px;
    font-size: 1rem;
    line-height: 1.4;
}

.box4 .detail .price {
    color: #ED1516;
    font-weight: bold;
    overflow: hidden;
    font-size: 23px;
    font-size: 1.4rem;
}  

.box4 .en {
    font-size: 16px;
	font-size: 1rem;
}

/* 5列 */
.box5 {
    width: 920px;
    margin: 0 auto;
}

.box5 .item {
    position: relative;
	float: left;
    box-sizing: border-box;
    width: 170px;
    margin: 0 17px 20px 0;
    text-align: left;
}

.box5 .item:nth-child(5n+5) {
    margin-right: 0;
}

.box5 .item .img {
    width: 170px;
    display: block;
    margin: 0 auto 10px;
}

.box5 .detail .name {
    margin-top: 5px;
    width: 100%;
    min-height: 50px;
	font-weight: bold;
    font-size: 15px;
    font-size: 0.95rem;
    line-height: 1.4;
}

.box5 .detail .price {
    color: #ED1516;
    font-weight: bold;
    overflow: hidden;
    font-size: 23px;
    font-size: 1.4rem;
}  

/* ランキング ラベル */
.labelrank {
	position: relative;
    display: inline-block;
    width: 170px;
    height: 30px;
    box-sizing: border-box;
    text-align: left;
    padding-left: 7px;
    margin-right: 5px;
	background-color: #17B6E0;
    font-size: 19px;
    font-size: 1.2rem;
    color: #fff;
    line-height: 30px;
    margin-bottom: 5px;
    text-align: center;
}

.no1:after,.no2:after,.no3:after {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	z-index: 2;
	border-width: 14px 10px;
	border-style: solid;
	border-color: transparent;
	border-right-color: #fff;
}

.no1 {
	background-color: #E4BF1B;
}

.no2 {
	background-color: #B3B3B3;
}

.no3 {
	background-color: #A67C52;
}


/*--------------------------------------
TOPへ戻る
---------------------------------------*/
#page-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
}

.top_icon {
	position: relative;
	display: inline-block;
	font-size: 0px;
	width: 75px;
	height: 75px;
	-webkit-border-radius: 50%; /* Google Chrome、Safari */
	-moz-border-radius: 50%; * Firefox */
	-ms-border-radius: 50%; /* Internet Explorer */
	-o-border-radius: 50%; /* Opera */
	border-radius: 50%;
	text-align: center;
	z-index: 1;
	color: #E60012;
}

.top_icon:after {
	position: absolute;
	content: '';
	pointer-events: none;
	width: 100%;
	height: 100%;
	-webkit-border-radius: 50%; /* Google Chrome、Safari */
	-moz-border-radius: 50%; * Firefox */
	-ms-border-radius: 50%; /* Internet Explorer */
	-o-border-radius: 50%; /* Opera */
	border-radius: 50%;
	-webkit-box-sizing: content-box; 
	-moz-box-sizing: content-box; 
	box-sizing: content-box;
}

.top_icon:before {
	display: block;
	font-family: 'FontAwesome';
    content: "\f106";
    padding-top: 10%;
    font-size: 45px;
    font-size: 3rem;
	-webkit-font-smoothing: antialiased;
}

/* effect */
.effect .top_icon {
	box-shadow: 0 0 0 4px #E60012;
	-webkit-transition: color 0.3s;
	-moz-transition: color 0.3s;
	transition: color 0.3s;
}

.effect .top_icon:after {
	top: -2px;
	left: -2px;
	padding: 2px;
	z-index: -1;
	background: #E60012;
	-webkit-transition: -webkit-transform 0.2s, opacity 0.3s;
	-moz-transition: -moz-transform 0.2s, opacity 0.3s;
	transition: transform 0.2s, opacity 0.3s;
}

/* effect a */
.effect-a .top_icon {
	color: #fff;
}

.effect-a .top_icon:hover {
	color: #E60012;
}

.effect-a .top_icon:hover:after {
	-webkit-transform: scale(1.3);
	-moz-transform: scale(1.3);
	-ms-transform: scale(1.3);
	transform: scale(1.3);
	opacity: 0;