@charset "UTF-8";

*{ margin:0; padding:0;}

/**************** 新商品一覧用 ****************/
#free_aria .change {
float:right;
}

.category-titile,
#free_aria .product_item2 {
border-bottom: 1px solid #ccc;
}

#free_aria .product_item2 {
padding:20px 0px;
}

#free_aria .product_item2 h3 {
margin-bottom:20px;
}

#free_aria .productImage2,
#free_aria .productContents2,
#free_aria .status_icon2 li {
float:left;
}

#free_aria .status_icon2 li {
margin-right:20px;
}

#free_aria .productImage2 {
width:130px;
text-algin:center;
}

#free_aria .productImage2 img {
margin: 0px auto;
}

#free_aria .productContents2 {
width:500px;
padding-left:20px;
}


#free_aria .pricebox2 {
margin-top:20px;
color:#cc0000;
}

/** youtube **/

.video {
margin:20px 0px 50px;
position: relative;
width: 100%;
padding-top: 56.25%;
}
.video iframe {
position: absolute;
top: 0;
right: 0;
width: 100% !important;
height: 100% !important;
}



/**************** default property reset ****************/
html, body {height: 100%;}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,th,td,nav {margin:0;padding:0;}
table {border-spacing: 0; }
fieldset,img {border:0;}
ul,li {list-style: none;}




/**************** LINK ****************/

a,img {border-style: none;}

a:link,
a:visited,
a:hover {text-decoration: none;}

a:link,
a:visited {color:#000;}

a:hover {color:#FFCF00;}

a:hover img {
	filter:alpha(opacity=80); /*IE*/
	-moz-opacity:0.8; /*FF*/
	opacity:0.8;
}

/**************** 共通css ****************/

.box1020 { width:1020px; margin: 0 auto;}
.box1000 { width:1000px; margin: 0 auto;}
.box380 { width: 380px;}
.box300 { width: 300px;}
.box230 { width: 230px;}
.box140 { width:140px; margin-bottom:2px;}/** 175px **/
.box120 { width: 120px;}
.box60 {width: 60px;}

.sp30 { margin: 30px 0;}
.side20{ margin: 0 20px;}


.bottom10 { margin-bottom:10px;}
.bottom15 { margin-bottom:15px;}
.bottom20 { margin-bottom:20px;}
.bottom30 { margin-bottom:30px;}
.bottom60 { margin-bottom:60px;}

.top10 { margin-top:10px;}
.top15 { margin-top:15px;}
.top20 { margin-top:20px;}


.orange {color:#cc6600;}
.red {color:#ff0000;}

.size80 {font-size:80%;}


.width-max {width:100%;}
.parallax-window {
    min-height: 300px;
    background: transparent;
}

.opacity80{opacity: 0.8;}

.progress {
margin-top : 50px;
}


/**************** ボタン ****************/

.btn_area {
	width: 100%;
	margin-top: 40px;
}

.btn_area ul {
	width: 100%;
	text-align: center;
}

.btn_area li {
	display: inline-block;
	margin: 0px 10px;
}


/** 緑ボタン **/
#button01 {
    padding: 10px 40px;
    font-size: 1.2em;
    background-color: #339999;
    color: #fff;
    border-style: none;
}

#button01:hover {
    background-color: #FFCF00;
}

/** 黒ボタン **/
#button02 {
    padding: 10px 40px;
    font-size: 1.2em;
    background-color: #333333;
    color: #fff;
    border-style: none;
}

#button02:hover {
    background-color: #FFCF00;
}


/**************** clearfix ****************/

.clearfix:after {
	content:".";
	display:block;
	height:0;
	clear:both;
	visibility:hidden;
}
.clearfix {display:inline-block;}
/* Hide from IE Mac ¥*/
	.clearfix {display:block;}
/* End hide from IE Mac */

.clear {
clear: both;
}


/**************** 骨組み ****************/

body {
	font-family: 'Noto Sans Japanese', sans-serif;
	font-size: 14px;
	background-color: #333333;
	line-height:1.8em;
	letter-spacing: 0.1em;
}

#main_back {
	background-image: url(../img/graphica/blue_top_back80.png);
	background-repeat: repeat-x;
	background-position: top;
}

#container {
	background-color:#FFF;
	margin: -60px 0px;
	padding-bottom: 40px;
	position: relative;
}

#container2 {
	clear:both;
	background-color:#FFF;
	padding-bottom:60px;
	margin-bottom:-60px;
}

.rankingboxfix {
	height:60px;
}


#left_menu {
	width : 320px;
	float:left;
}

#leftcolumn {
	width : 280px;
	float:left;
	padding-top: 30px;
}

#two_maincolumn_right {
	padding-top: 30px;
	float: left;
	width: 690px;
	margin-left: 30px;
}


/**************** ポイント  ****************/

.point_announce {
	background-color:#f2f2f2;
	padding: 20px;
	margin-bottom: 30px;
}


.point {
	color:#ff6600;
}



/**************** メインイメージ  ****************/

#main_img{
	padding-top:180px;
	text-align: center;
}

#bx-pager img {
    margin: 3px;
}

#main_img2 {
    height: 200px;
    overflow: hidden;
}

/**************** 新着情報　/　メルマガ登録  ****************/

.gray_back {
	background-image:url(../img/graphica/gray_back30.png);
	padding: 20px 0 80px 0;
	text-align:left;
}

#top_mail_mag {
	float:right;
	width: 270px;
	padding:20px 20px 10px;
	background: #fefefe; /* Old browsers */
	background: -moz-linear-gradient(top,  #fefefe 0%, #dad9d9 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top,  #fefefe 0%,#dad9d9 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom,  #fefefe 0%,#dad9d9 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fefefe', endColorstr='#dad9d9',GradientType=0 ); /* IE6-9 */
}

#mail_box {
	background-color:#808080;
	padding: 5px;
	margin-bottom: 10px;
}
#mail_box .txt_box {
	float:left;
}

#mail_box .txt_box input {
	width: 175px;
	height: 1.7em;
	margin-bottom: 3px;
}

#top_mail_mag .orange {
	font-size: 80%;
}

.btn-next {
	background-image:url(../img/graphica/top_mail_magazine_button.png);
	width: 70px;
	height: 55px;
	text-indent: -9999px;
	display: block;
	margin-left:190px;
}

#whats_new {
	width: 655px;
	height:200px;
}

#whats_new .title {
	background-image:url(../img/graphica/white_back50.png);
	height:40px;
}

#whats_new .title .more {
	float:right;
	background-image:url(../img/graphica/white_back50.png);
	padding: 10px 15px;
	height: 20px;
	font-size: 80%;
}

#whats_new dl {
	color:#FFF;
	margin-top: 15px;
  overflow: scroll;
  height: 140px;
}

#whats_new dt {
	padding-top : 5px;
	padding-left : 30px;
	padding-bottom : 5px;
	width : 130px;
	float : left;
	background-image: url(../img/graphica/top_news_list.png);
	background-repeat: no-repeat;
	background-position: left center;
}

#whats_new dd{
	padding-top : 5px;
	padding-bottom : 5px;
	width : 500px;
	margin-left : 140px;
}


/****************  検索フォーム  ****************/

#search {
	padding: 30px 0;
}

#search_form {
	width: 1000px;
	display: block;
	height: 40px;
	font-size: 120%;
	position: relative;
	background-image: url(../img/graphica/search.gif);
	background-repeat: no-repeat;
	background-position: left top;
}

.keyword {
	width: 900px;
	height: 30px;
    position: absolute;
    top: 5px;
    left: 40px;
    border: 1px solid #EEF4F5;
	background-color: #EEF4F5;
}

#search_form p.btn {
	position: absolute;
    top: 0px;
    left: 0px;
}

/****************  パンくず  ****************/

#breadcrumb {
	padding:220px 0px 80px 0px;
	color:#fff;
	font-size:80%;
}

#breadcrumb a {
	color:#fff;
}


/****************  index カテゴリー新着情報  ****************/

#top_category ul {
	table-layout: fixed;
}

#top_category li {
	display: table-cell;
	width: 309px;
}

#top_category li h2 {
	font-size: 12pt;
	padding: 20px 0;
}

.category01,
.category02 {
	padding-right: 36px;
}

#top_category li.category01 h2,
#top_category li.category01 .more_category {
	color:#339999;
}

#top_category li.category02 h2,
#top_category li.category02 .more_category {
	color:#cc0066;
}

#top_category li.category03 h2,
#top_category li.category03 .more_category {
	color:#996600;
}

.more_category {
	clear: both;
	font-size: 12pt;
	font-weight:bold;
	width: 269px;
	padding:15px 20px;
	text-align: right;
	margin: 20px 0;
}

#top_category li.category01 .more_category {
	background-color: #d6efef;
}

#top_category li.category02 .more_category {
	background-color: #fae6f0;
}

#top_category li.category03 .more_category {
	background-color: #faf7d8;
}


/****************　新着商品　****************/

.product_item {
	clear: both;
	height: 180px;
}

.productImage {
	float:left;
	padding: 0 15px 10px 0;
}

.productContents {
	font-size: 80%;
	letter-spacing: 0.05em;
	line-height:1.4em;
}

.productContents h3 {
	font-size : 11pt;
	padding-bottom: 15px;
}

.product_item .sale_price {
	clear: both;
	font-size : 80%;
	color:#FF3D3D;
}


/****************　　メンバーメリット　　****************/

#member_merit {
	padding: 80px 0;
	text-align: center;
}

#member_merit li {
	float:left;
	width:320px;
	margin-bottom: 20px;
}


/****************　　バナーエリア　　****************/

#banner_area {
	background-color:#f2f2f2;
	margin-top: -30px;
	padding: 40px 0;
}

#banner_area li {
	float:left;
	margin:10px;
}



/****************　　固定ページ共通　　****************/

#undercolumn {
	padding: 40px 0;
}

#undercolumn h2.title,
#mypagecolumn h2.title,
#two_maincolumn_right h2.title  {
	color:#fff;
	border-bottom-color: #666;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	padding-bottom: 4px;
	margin-bottom: 20px;
}

#undercolumn h2.title span,
#mypagecolumn h2.title span,
#two_maincolumn_right h2.title span  {
	background: #666;
	font-weight: normal;
	font-size: 110%;
	padding: 7px 20px 7px;
}


/****************　　会社案内　　****************/

.order,
.shops {
	padding: 40px 0;
}


/****************　　会社案内　　****************/


#undercolumn p {
	margin-bottom:30px;
}

#undercolumn table.download td a {
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
/*IE 7 AND 8 DO NOT SUPPORT BORDER RADIUS*/
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = '#ffffff', endColorstr = '#919191');
/*INNER ELEMENTS MUST NOT BREAK THIS ELEMENTS BOUNDARIES*/
/*Element must have a height (not auto)*/
/*All filters must be placed together*/
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr = '#ffffff', endColorstr = '#919191')";
/*Element must have a height (not auto)*/
/*All filters must be placed together*/
background-image: -moz-linear-gradient(top, #ffffff, #919191);
background-image: -ms-linear-gradient(top, #ffffff, #919191);
background-image: -o-linear-gradient(top, #ffffff, #919191);
background-image: -webkit-gradient(linear, center top, center bottom, from(#ffffff), to(#919191));
background-image: -webkit-linear-gradient(top, #ffffff, #919191);
background-image: linear-gradient(top, #ffffff, #919191);
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
/*Use "background-clip: padding-box" when using rounded corners to avoid the gradient bleeding through the corners*/
/*--IE9 WILL PLACE THE FILTER ON TOP OF THE ROUNDED CORNERS--*/

	padding: 20px;
	border: 1px solid #999;
}



/****************　　MYページ(ログイン)　　****************/

.inputbox2 {
	background-color:#f2f2f2;
	padding: 30px;
}

.inputbox2 dt {
	float:left;
}

.inputbox2 dd .box300 {
	line-height:18px;
}


.login_memory {
	color:#666;
	font-size: 80%;
}

/****************　　MYページ(退会手続き(完了ページ))　　****************/

#complete_area .message {
	background-color:#f2f2f2;
	padding: 30px;
}


/****************　　フッターエリア　　****************/



footer {
	color:#FFF;
	font-size: 80%;
	padding: 30px 0;
}

footer a:link,
footer a:visited {
	color:#FFF;
}


footer a:hover {
	color:#FFCF00;
}

footer #sns {
	float:right;
}

footer #sns li {
	float:left;
	margin-left: 20px;
}


footer nav li {
	height:15px;
	line-height: normal !important;
	display: -moz-inline-box;
	display: inline-block;
	*display: inline;
	*zoom: 1;
}

footer nav li + li {
	border-left:1px solid #CCC;
	padding-left:10px;
	margin-left:6px;
}

footer #copylight {
	margin-top: 15px;
	clear:left;
	float:left;
}