@charset "UTF-8";
/* CSS Document */
/* IE cssロールオーバーで背景がちらつく件　IE用ハック*/
html {
filter: expression(document.execCommand("BackgroundImageCache", false, true));
}

html, body {
  height:100%;
  /*background:#EDEDED;*/
  line-height:120%;
}

body{
	color: #000;
	font-size:small;
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "メイリオ", Meiryo, Verdana, "ＭＳ Ｐゴシック", sans-serif;
	min-width:1024px;
	max-width:100%;
	background:#000;
}
@media(max-width:1023px){
	body{
		min-width:100%;
	}
}
@media(max-width:640px){
	body{
		min-width:300px;
	}
}
img{
	border:none;
}

a:link 		{color: #000; text-decoration: none;}
a:active 	{color: #900; text-decoration:underline;}
a:hover 	{color: #900; text-decoration:underline;}
a:visited 	{color: #000; text-decoration: none;}

*{
	margin:0;
	padding:0;
	}

/*clearfix ie対策済み*/
.clearfix {zoom:1;}
.clearfix:after{
    content: ""; 
    display: block; 
    clear: both;
	}

/*非表示*/
.disnon{
	display:none;
}

/*レイアウト*/
#container{
	min-height: 100%;
    height: auto !important;
    height: 100%;
    position: relative;
}
#HeadBox{
	/*header.css*/
}
#contents{
}
#footer{
	clear:both;
	background:#000;
	width:100%;
	color:#CCC;
	font-size:90%;
	margin:0;
	padding:0;
	position:relative;
	/*height: 80px;
    position: absolute;
    bottom:0;
	left:0;*/
}
/** html #footer {
    bottom:expression(document.getElementById("container").offsetHeight % 2 == 0 ? 0 : -1);
}*/



h2{
	font-weight:200;
	font-size:28px;
	line-height:30px;
	margin:0 0 15px 0;
}

p{
	margin:0 0 15px 0;
}


/*----------------------------*/
/*ヘッダー部  --> header.css*/
/*----------------------------*/


/*----------------------------*/
/*バナーエリア*/
/*----------------------------*/
.banner{
	padding-top:0;
}
.banner a{
	display:block;
	width:50%;
	float:left;
	padding-bottom:0;

}
.banner a img{
	display:block;
	width:100%;
}

.banner a:hover img{
    -webkit-filter: brightness(1.2);
	-webkit-filter:brightness(120%);
     -moz-filter: brightness(1.2);
     -o-filter: brightness(1.2);
     -ms-filter: brightness(1.2);
     filter: brightness(1.2);
}
@media(max-width:640px){
	.banner{
	}
	.banner a{
		width:100%;
		float:none;
	}
}


/*----------------------------*/
/*main contents*/
/*----------------------------*/

/*-------------------
各項目
----------------------*/
ul.tips{
	list-style:none;
	margin:0;
	padding:0;
	background-color:#FFF;
	position:relative;
	
	/* display: -moz-box;
  display: -webkit-box;
     webkitは、どのバージョンのFlexboxも使えますが、モバイルの後方互換を考えて、display: box; */
  /*display: -ms-flexbox;
  display: flex;

		flex-wrap:wrap;*/
}
.tips li{
	margin:0;
	/*padding:0;display:table-cell*/
}
.tips li.half{
	width:50%;
	float:left;
}
.tips li.full{
	width:100%;
	clear:both;
}
.tips li:nth-child(4n+1) {background-color: #5CB7B9;}
.tips li:nth-child(4n+2) {background-color: #999900;}
.tips li:nth-child(4n+3) {background-color: #FFCC00;}
.tips li:nth-child(4n+0) {background-color: #FF9900;}


/*ie8*/
.tips > *:first-child {background-color: #5CB7B9;}
.tips > *:first-child + * {background-color: #999900;}
.tips > *:first-child + * + * {background-color: #FFCC00;}
.tips > *:first-child + * + * + * {background-color: #FF9900;}

.tips > *:first-child + * + * + * + *{background-color: #5CB7B9;}
.tips > *:first-child + * + * + * + * + *{background-color: #999900;}
.tips > *:first-child + * + * + * + * + * + *{background-color: #FFCC00;}
.tips > *:first-child + * + * + * + * + * + * + *{background-color: #FF9900;}

.tips > *:first-child + * + * + * + * + * + * + * + *{background-color: #5CB7B9;}
.tips > *:first-child + * + * + * + * + * + * + * + * + *{background-color: #999900;}
.tips > *:first-child + * + * + * + * + * + * + * + * + *  + *{background-color: #FFCC00;}
.tips > *:first-child + * + * + * + * + * + * + * + * + * + * + * + *{background-color: #FF9900;}


.tips li div.inner{
	padding:20px;
}
.tips span.stamp{
	clear:both;
	display:block;
	margin:15px 0 0 0;
	text-align:right;
	
}
/*new icon*/
.tips h2 img{
	vertical-align:middle;
	padding-right:3px;
}

@media(max-width:640px){
	.tips li.half{
		width:100%;
	}
}

/*tipsの中のコンテンツ用*/
.tips ol{
	list-style-position:inside;
}
.tips ol li{
	width:50%;
	float:left;
	margin:0;
	padding:0;
}
.tips ol.nohalf li{
	width:100%;
	float:none;
}

.tips ol > *:first-child {background-color:transparent;}
.tips ol li:nth-child(4n+1) {background-color:transparent;}
.tips ol li:nth-child(4n+2) {background-color:transparent;}
.tips ol li:nth-child(4n+3) {background-color:transparent;}
.tips ol li:nth-child(4n+0) {background-color:transparent;}

.tips ul > *:first-child {background-color:transparent;}
.tips ul li:nth-child(4n+1) {background-color:transparent;}
.tips ul li:nth-child(4n+2) {background-color:transparent;}
.tips ul li:nth-child(4n+3) {background-color:transparent;}
.tips ul li:nth-child(4n+0) {background-color:transparent;}

.tips .cartBox ul > *:first-child {background-color:transparent;}
.tips .cartBox ul li:nth-child(4n+1) {background-color:transparent;}
.tips .cartBox ul li:nth-child(4n+2) {background-color:transparent;}
.tips .cartBox ul li:nth-child(4n+3) {background-color:transparent;}
.tips .cartBox ul li:nth-child(4n+0) {background-color:transparent;}

@media(max-width:1023px){
	.tips ol li{
		width:100%;
		float:none;
	}
}

.tips ol + p{
	clear:both;
	padding:10px 0 0 0;
}

.tips p.tipsimg,
.tips div.tipstext{
	margin:0 0 15px 0;
}

.tips p.tipsimg img,
.tips .cartjs_product_img img{
-webkit-box-shadow: #666 0 5px 8px;
-moz-box-shadow: #666 0 5px 8px;
box-shadow: #666 0 5px 8px;
	behavior: url(/assets/templates/PIE.htc);
}
.tips p.tipsimg img.arrow{
-webkit-box-shadow: #666 0 0 0;
-moz-box-shadow: #666 0 0 0;
box-shadow: #666 0 0 0;
	behavior: url(/assets/templates/PIE.htc);
}

li.half p.tipsimg img{
	width:100%;
	height:auto;
}

/*100％使用*/
li.full p.tipsimg img{
	vertical-align:middle;
	width:48%;
	height:auto;
}
@media(max-width:640px){
	li.full div.tipstext p,
	li.full div.tipstext div{
		display:block;
		float:none;
	}
	li.full div.tipstext p{
		width:100%;
		margin-right:0;
	}
	li.full div.tipstext div{
		width:100%;
	}
}
	
	
/*画像2つのみ*/
li.full p.beside img{
}
li.full p.beside img:first-child{
	margin-right:4%;
}


/*間に矢印など*/
li.full p.between img{
}
li.full p.between img.arrow{
	width:4%;
	height:auto;
}
/*fullに1枚横長画像*/
li.full p.wide img{
	width:100%;
	height:auto;
}
/*fullにテキストと画像で半分づつ*/
div.textandimg{
	float:left;
	width:50%;
}
li.full div.textandimg p.tipsimg{
	margin-left:4%;
}
li.full div.textandimg p.tipsimg img{
	vertical-align:middle;
	width:100%;
	height:auto;
}



@media(max-width:640px){
	li.full p.tipsimg{
		text-align:center;
	}
	li.full p.tipsimg img{
		vertical-align:bottom;
		width:100%;
	}
	li.full p.between img.arrow{
		vertical-align:bottom;
		width:auto;
		height:auto;
		transform: rotate(90deg);
	}
	li.full p.beside img:first-child{
		margin-right:0;
		margin-bottom:10px;
	}
	div.textandimg{
		float:none;
		width:100%;
	}
	li.full div.textandimg p.tipsimg{
		margin-left:0;
	}
}

/*埋草*/
.space_box{
}

.space_box img{
	width:auto;
	max-width:100%;
	height:auto;
}

.space_box_bottom{
	position:absolute;
	max-width:410px;
	width:auto;
	
	right:20px;
	bottom:20px;
	padding:0;
	margin:0;
}
.space_box_top{
	text-align:center;
	padding:150px 0 0 0;
}
.space_box_top img{
	-moz-transform: rotateY(180deg);
	-webkit-transform: rotateY(180deg);
	-o-transform: rotateY(180deg);
	-ms-transform: rotateY(180deg);
}

@media(max-width:900px){
	.space_box{
		right:auto;
		text-align:center;
	}
	.space_box img{
		width:80%;
		height:auto;
	}
}

@media(max-width:640px){
	.space_box{
		position:relative;
		right:auto;
		bottom:auto;
		text-align:center;
		max-width:100%;
	}	
	.space_box_top{
		padding:0;
	}
}

/*セット比較table*/
.ProductsTable{
	width:100%;
	margin:0;
	padding:0;
	border-collapse:collapse;
	border:solid 1px #000;
	background:url(bg_w30.png);
}
.ProductsTable a{
	color:#000;
	font-weight:bold;
}
.ProductsTable a:hover{
	color:#039;
}
.ProductsTable caption{
	background:#000;
	color:#FFF;
}
.ProductsTable th,
.ProductsTable td{
	margin:0;
	padding:3px;
	border:solid 1px #000;
	font-weight:normal;
	text-align:center;
}
.ProductsTable th{
}
.tdcenter td{
}
.filmTable{
}
@media(max-width:640px){
	.ProductsTable{
		font-size:90%;
	}
	.ProductsTable th img{
		width:100px;
	}
}
@media(max-width:400px){
	.ProductsTable th img{
		width:80px;
	}
}


/*店舗リストのテーブル*/
.shoplistTable{
	margin-bottom:15px;

}
.shoplistTable thead th{
	background:#333;
	color:#FFF;
}
.shoplistTable tbody tr:nth-child(even) {
}
.shoplistTable tbody tr:nth-child(odd) {
	background:url(bg_w50.png);
}
.shoplistTable td img{
	vertical-align:middle;
	margin:0 2px;
}
.shoplistTable td span{
	display:inline-block;
	border:1px solid #333;
	margin:1px 2px;
	padding:0px 2px;
}



/*To be continued...coming soon*/
div.tobe{
	background:#996666;
	margin:0;
	padding:20px;
}


/*フッター*/
#footer div.pageNavi{
	position:absolute;
	top:-30px;
	right:30px;
	width:50px;
}

#footer div.pageNavi a{
	display:block;
	text-align:center;
	text-decoration:none;
	font-size:16px;
	padding:7px 0 8px 0;	
	border-top-left-radius:10px;
	border-top-right-radius:10px;
	background:#333;
	color:#FFF;
}

#footer div.pageNavi a:active,
#footer div.pageNavi a:hover{
	background:#5CB7B9;
	color:#000;
}

#footer ul{
	clear:both;
	list-style:none;
	margin:0 0 0 30px;
	padding:0;
}

#footer li{
	float:left;
}

#footer li a{
	display:block;
	padding:3px 10px;
	margin-right:5px;
	background:#444;
	color:#FFF;
	text-decoration:none;
}
#footer li a:active,
#footer li a:hover{
	background:#5CB7B9;
	color:#000;
}

#footer p{
	clear:both;
	display:block;
	padding-left:30px;
}

#footer p.copyright{
	margin:0;
	padding-top:15px;
}
#footer p.disclaimer{
	margin:0;
	padding-bottom:20px;
}

@media(max-width:640px){
	#footer div.pageNavi{
		right:20px;
	}
	#footer ul{
		margin:0 0 0 20px;
	}
	#footer p{
		padding-left:20px;
	}
}

/*********<div class="campaign">**************/
.campaign{
	background:#FFF;
	margin:0;
	padding:20px;
}
.campaign a:link {color: #000; text-decoration: underline;}
.campaign a:active 	{color: #900; text-decoration:underline;}
.campaign a:hover 	{color: #900; text-decoration:underline;}
.campaign a:visited 	{color: #000; text-decoration: none;}

.campaign h1 img{
	display:block;
	margin:0 auto;
	max-width:100%;
	height:auto;
}

.campaign h2{
	font-weight:200;
	font-size:28px;
	line-height:30px;
	margin:0 0 15px 0;
}

.campaign h3{
	margin:0 0 10px 0;
	padding:2em 0 3px 0;
	border-bottom:1px solid #000;
}
.campaign p{
	line-height:140%;
	margin:0 0 0.2em 0;
}
.campaign strong{
	font-weight:bold;
	font-size:110%;
}
.campaign .inner{
	width:940px;
	margin:20px auto;
	padding:30px;
}
@media(max-width:1040px){
	.campaign .inner{
		width:auto;
		margin:20px 0;
		padding:30px;
	}
}
@media(max-width:640px){
	.campaign .inner{
		padding:20px;
	}
}
.campaign .inner:nth-child(4n+1) {background-color: #5CB7B9;}
.campaign .inner:nth-child(4n+2) {background-color: #999900;}
.campaign .inner:nth-child(4n+3) {background-color: #FFCC00;}
.campaign .inner:nth-child(4n+0) {background-color: #FF9900;}

.entry{
	background:url(bg_w50.png);
	padding:20px;
	border-radius:8px;
	-moz-border-radius:8px;
	-webkit-border-radius:8px;
	behavior: url(/assets/templates/PIE.htc);
}
.entry_products{
	background:#FFF;
	padding:20px;
	border-radius:8px;
	-moz-border-radius:8px;
	-webkit-border-radius:8px;
	behavior: url(/assets/templates/PIE.htc);
}
.entry_products ul{
	list-style: none;
	margin: 0 auto 20px auto;;
	padding: 0;
	display:table;
}

.entry_products li {
    display:table-cell;
	vertical-align:top;
    margin:0;
    width: 300px;
    text-align: center;
}

@media(max-width:1040px){
	.entry_products ul{
		display:block;
		list-style: none;
		margin: 0 auto;
		padding: 0;
		line-height: 110%;
		text-align: center;
		letter-spacing: -.40em;
	}
	.entry_products li{
		display: inline-block;
		letter-spacing: normal;
		padding-bottom:20px;
		margin:0;
		width: 300px;
		text-align: center;
	}
}
@media(max-width:640px){
	.entry_products ul{
		letter-spacing: 0;
	}
	.entry_products li{
		display:block;
		width: 100%;
	}
	.entry_products li img{
		width:auto;
		max-width:100%;
	}
}
/*キャンペーン送り先*/
.camp_address{
	background:#FFF;
	padding:15px;
	margin:0 0 15px 0;
	border-radius:8px;
	-moz-border-radius:8px;
	-webkit-border-radius:8px;
	behavior: url(/assets/templates/PIE.htc);
}
.camp_address ul{
	margin:0 0 0 1em;
}
.camp_address ul li{
	margin-bottom:0.5em;
	line-height:140%;
}


/*申込書ダウンロード*/
.campaign .pdfdl a:link{
	text-decoration:none;
}
.pdfdl{
	text-align:center;
	margin:10px 0;
}
.pdfdl a{
	display:block;
	background-image:url(dl_button.png) ;
	background-repeat:no-repeat;
	background-position:left top;
	width:380px;
	height:50px;
	margin:0 auto;
	padding:0;
	text-indent: -9999px;
}
.pdfdl a:hover{
	background-position:left bottom;
}

@media(max-width:640px){
	.pdfdl a{
		background-image:none;
		width:auto;
		height:auto;
		padding:10px 5px;
		text-indent:0;
		text-align:center;
		font-weight:bold;

-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
-webkit-box-shadow: #666 0px 2px 3px;
-moz-box-shadow: #666 0px 2px 3px;
box-shadow: #666 0px 2px 3px;
background: #FFFFFF;
background: -webkit-gradient(linear, 0 0, 0 bottom, from(#FFFFFF), to(#99FFFF));
background: -webkit-linear-gradient(#FFFFFF, #99FFFF);
background: -moz-linear-gradient(#FFFFFF, #99FFFF);
background: -ms-linear-gradient(#FFFFFF, #99FFFF);
background: -o-linear-gradient(#FFFFFF, #99FFFF);
background: linear-gradient(#FFFFFF, #99FFFF);
-pie-background: linear-gradient(#FFFFFF, #99FFFF);
behavior: url(/assets/templates/PIE.htc);
	}
	.pdfdl a:hover{
		background: #BBBBBB;
background: -webkit-gradient(linear, 0 0, 0 bottom, from(#BBBBBB), to(#EEEEEE));
background: -webkit-linear-gradient(#BBBBBB, #EEEEEE);
background: -moz-linear-gradient(#BBBBBB, #EEEEEE);
background: -ms-linear-gradient(#BBBBBB, #EEEEEE);
background: -o-linear-gradient(#BBBBBB, #EEEEEE);
background: linear-gradient(#BBBBBB, #EEEEEE);
-pie-background: linear-gradient(#BBBBBB, #EEEEEE);
behavior: url(/assets/templates/PIE.htc);
	}
}


/*よくある質問*/
ul.faq{
	list-style:none;
}
.faq li{
	background:url(bg_w50.png);
	margin:20px 0;
	padding:20px;
	border-radius:8px;
	-moz-border-radius:8px;
	-webkit-border-radius:8px;
	behavior: url(/assets/templates/PIE.htc);
}

.faq li h4{
	font-weight:200;
	font-size:18px;
	line-height:22px;
	margin:0 0 15px 0;
	padding:0;
	border:none;
}
.faq li h4:first-letter{
	margin:0 0 0 -5px;
	font-weight:900;
	font-family:"Arial Black", Arial;
	color:#990;
	font-size:50px;
}

.faq li h4 + p{
	clear:both;
}
/*ご注意*/
.attention{
	list-style:disc;
	color:#FF3300;
	padding:20px;
	background:url(bg_w50.png);
	border-radius:8px;
	-moz-border-radius:8px;
	-webkit-border-radius:8px;
	behavior: url(/assets/templates/PIE.htc);
}
.attention li{
	margin:0 0 0.5em 1em;
}
.attention p{
	color:#000;
}

/*問い合わせ*/	
.camp_inq{
	margin:20px auto;
	width:980px;
	text-align:center;
	padding:10px;
	border:3px solid #DDD;
	border-radius:8px;
	-moz-border-radius:8px;
	-webkit-border-radius:8px;
	behavior: url(/assets/templates/PIE.htc);
}
.camp_inq img{
	max-width:100%;
	height:auto;
}
.camp_inq p{
	margin-bottom:0;
}
@media(max-width:1040px){
	.camp_inq{
		width:auto;
		margin:20px 0;
	}
}

/*キャンペーン内のカート*/
.campaign .cartBox{
	}
.campaign .cartBox h3{
	display:none;
}
.campaign .cartjs_product_table table{
	box-shadow:none;
}
@media(max-width:1040px){
	.campaign .cartBox ul{	
		margin: 0 auto;
	}
}
@media(max-width:640px){
	.campaign .cartBox img{	
		max-width:60%;
	}
}