@charset "utf-8";

/* =======================================
    スライダー
======================================= */
.wideslider {
    width: 100%;
    text-align: left;
    position: relative;
    overflow: hidden;
}
 
.wideslider ul,
.wideslider ul li {
    float: left;
    display: inline;
    overflow: hidden;
}
 
.wideslider ul li img {
    width: 100%;
    display: none;
}
 
.wideslider_base {
    top: 0;
    position: absolute;
}
.wideslider_wrap {
    top: 0;
    position: absolute;
    overflow: hidden;
 
}
.slider_prev,
.slider_next {
    top: 0;
    overflow: hidden;
    position: absolute;
    z-index: 100;
    cursor: pointer;
}
.slider_prev {
	background: url(../img/top/prev.png) no-repeat right center;
}
.slider_next {
	background: url(../img/top/next.png) no-repeat left center;
}
 
.pagination {
    bottom: 10px;
    left: 0;
    width: 100%;
    height: 15px;
    text-align: center;
    position: absolute;
    z-index: 200;
}
 
.pagination a {
    margin: 0 5px;
    width: 14px;
    height: 14px;
    display: inline-block;
    overflow: hidden;
	-webkit-border-radius: 7px;/* width,heightの半分 */
	-moz-border-radius: 7px;
	border-radius: 7px;
	background-color: #b8c7d0;/* 円の色 */
}
.pagination a.active {
    filter:alpha(opacity=100)!important;
    -moz-opacity: 1!important;
    /*opacity: 1!important;*/
	background-color: #0083d5;/* 円の色 */
}
 
 
.wideslider ul:after {
    content: ".";
    height: 0;
    clear: both;
    display: block;
    visibility: hidden;
}
 
.wideslider ul {
    display: inline-block;
    overflow: hidden;
}
/* =======================================
    スライダー用ローディング画面
======================================= */
.loaderArea {
	position: relative;
	height: 410px;
	overflow: hidden;
}
.loader {
  font-size: 10px;
  margin: 150px auto;
  /*text-indent: -9999em;*/
  width: 11em;
  height: 11em;
  border-radius: 50%;
  background: #0080ff;
  background: -moz-linear-gradient(left, #0080ff 10%, rgba(0,128,255, 0) 42%);
  background: -webkit-linear-gradient(left, #0080ff 10%, rgba(0,128,255, 0) 42%);
  background: -o-linear-gradient(left, #0080ff 10%, rgba(0,128,255, 0) 42%);
  background: -ms-linear-gradient(left, #0080ff 10%, rgba(0,128,255, 0) 42%);
  background: linear-gradient(to right, #0080ff 10%, rgba(0,128,255, 0) 42%);
  position: relative;
  -webkit-animation: load3 1.4s infinite linear;
  animation: load3 1.4s infinite linear;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
}
.loader:before {
  width: 50%;
  height: 50%;
  background: #0080ff;
  border-radius: 100% 0 0 0;
  position: absolute;
  top: 0;
  left: 0;
  content: '';
}
.loader:after {
  background: #ffffff;
  width: 75%;
  height: 75%;
  border-radius: 50%;
  content: '';
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}
@-webkit-keyframes load3 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes load3 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

.loaderArea.is-fadeout{
    opacity: 0;
    animation-duration: 0.1s;
    animation-name: fade-out;
    -webkit-animation-duration: 0.1s;
    -webkit-animation-name: fade-out;
}
.loaderArea.is-hidden{
    display: none;
}

/* =======================================
    8つの強み
======================================= */
#strength {
	border:dotted 3px #0083d5;
	padding:0 20px 20px 3px;
	position:relative;
}
#strength img{
	margin-top:-15px;
}
#ani {
    position: absolute;
    top: 176px;
    left: 416px;
}
/* =======================================
    注文の流れ
======================================= */
#order_flow{
	margin-top:40px;
}
#order_flow .ttl{
	background-image:url(../img/top/ttl_order_flow.jpg);
	background-repeat:no-repeat;
	font-size:22px;
	color:#fff;
	padding:9px 30px;
}
#order_flow .order_box{
	border:dotted 3px #42b5fd;
	padding:20px;
	background-color:#f8fcff;
	position:relative;
}
#order_flow img {
    margin-left: -37px;
}
#order_flow .order_box p {
	margin-bottom: -50px;
}
#order_flow .btn {
    bottom: 25px;
    position: absolute;
    right: 25px;
}
#order_flow .btn img{
	margin-left:0;
}
#order_flow .order_box .btn{
	box-shadow:none;
}

/* =======================================
   特集・キャンペーン
======================================= */
#special_campaign{
	margin-top:40px;
}
#special_campaign .ttl {
    background-image: url("../img/top/img_line.png");
    background-repeat: no-repeat;
    color: #0083d5;
    font-size: 32px;
    padding: 20px 0;
}

#special_campaign .ttl span {
    color: #000;
    display: inline-block;
    font-size: 13px;
    vertical-align: middle;
	margin-left:15px;
}
div.special_campaign_box {
  display: -webkit-box;
  display: -wbkit-flex;
  display: flex;
}

.special_campaign_box .box{
	margin-right:20px;
	width:246px;
}
.special_campaign_box .box:last-child{
	margin-right:0;
}
.special_campaign_box .box img{
	border:1px solid #e5e5e5;
}
.special_campaign_box .box .come h3{
	margin:15px 0;
}
.special_campaign_box .box .come p{
	font-size:11px;
	color:#7f8487;
}

/* =======================================
   ランキング top
======================================= */
#rankings{
	margin-top:40px;
	background:none;
	padding:none;
}
#rankings .ttl {
    background-image: url("../img/top/img_line.png");
    background-repeat: no-repeat;
    color: #0083d5;
    font-size: 32px;
    padding: 20px 0;
	margin:0;
}
#rankings .ttl span {
    color: #000;
    display: inline-block;
    font-size: 13px;
    vertical-align: middle;
	margin-left:15px;
}
div.rankings_box {
	display: -webkit-box;
  display: -wbkit-flex;
  display: flex;
  background-image: url("../img/top/line_dotted.png");
  background-repeat:no-repeat;
  padding-top:15px;
}
.rankings_box .box{
	margin-right:10px;
}
#rankings .rankings_box .box:nth-child(n + 6){
	display:none;
}
.rankings_box .box:last-child{
	margin-right:0;
}
.rankings_box .box .rank {
    margin-bottom: 10px;
    position: relative;
    text-align: center;
}
.rankings_box .box .rank .fukidashi {
    left: -13px;
    position: absolute;
}
.rankings_box .box .come {
	overflow: hidden;
	-o-text-overflow: ellipsis;
	-webkit-text-overflow: ellipsis;
	text-overflow: ellipsis;
	white-space: nowrap;
	width:147px;
	margin:10px 0;
}
.rankings_box .box .price {
    color: #f14b98;
    font-size: 16px;
    font-weight: bold;
    text-align: center;
}
.rankings_box .item img{
	width:150px;
	height:150px;
}
/* =======================================
   新着情報
======================================= */
#news_area{
	margin-top:40px;
}
#news_area .ttl {
    background-image: url("../img/top/img_line.png");
    background-repeat: no-repeat;
    color: #0083d5;
    font-size: 32px;
    padding: 20px 0;
}
#news_area .ttl span {
    color: #000;
    display: inline-block;
    font-size: 13px;
    vertical-align: middle;
	margin-left:15px;
}
#news_area .news_area_box{
}
#news_area .news_area_box .news_contents{
    background-image: url("../img/top/line_dotted.png") ;
	background-position: top center;
    background-repeat: no-repeat;
}
#news_area dl.newslist {
    background-image: url("../img/top/line_dotted.png") ;
	background-position:bottom center;
    background-repeat: no-repeat;
	padding:7px 0;
}
#news_area dl.newslist dt {
	display:inline-block;
}
#news_area dl.newslist dt.day{
	width:118px;
}

#news_area dl.newslist dt.category {
    background-color: #fa7bb6;
    color: #fff;
    padding: 2px 5px;
    text-align: center;
    width: 60px;
}
#news_area dl.newslist dd {
    display: inline-block;
    padding-left: 15px;
    vertical-align: middle;
    width: 570px;
}
#news_area dl.newslist dd a {
 color: #0083d5;
}
/* =======================================
   商品カテゴリ一覧
======================================= */
#categorylist{
	margin-top:40px;
	width: 100%;
}
#categorylist .ttl {
    background-image: url("../img/top/img_line.png");
    background-repeat: no-repeat;
    color: #0083d5;
    font-size: 32px;
    padding: 20px 0;
}
#categorylist .ttl span {
	color: #000;
	display: inline-block;
	font-size: 13px;
	vertical-align: middle;
	margin-left:15px;
}
div.categorylist_box {
  display: -webkit-box;
  display: -wbkit-flex;
  display: flex;
	font-size: 0;
}
div.categorylist_box .box {
	display:inline-block;
	width: 125px;
	margin-right:5px;
}
@media screen and (-webkit-min-device-pixel-ratio:0) {
	div.categorylist_box .box {
		width: 120px;
	}
}
.categorylist_box .box .end{
	margin-right:0 !important;
}
.categorylist_box .box a {
	display:block;
}
.categorylist_box .box img{
 width: 100%;
}
.categorylist_box .box h3{
	text-align:center;
	margin:10px 0;
	font-size: 13px;
}

/* =======================================
   SNS
======================================= */
#sns{
	margin-top:40px;
}
.twitter {
    display: inline-block;
    position: relative;
    width: 380px;
}
.twitter h2 {
    position: absolute;
    top: -20px;
}
.twitter_box{
}
#twitter-widget-0{
	width:379px !important;
}
.fb{
    display: inline-block;
    position: relative;
    width: 380px;
}
.fb h2{
    position: absolute;
    top: -20px;
	z-index:5;
}