@charset "utf-8";
/* CSS Document */
/* responsive_gray_style */



:root {
  --brown:#40220F;
  --pink:#D70051;
  --violet:#9659A1;
  --white:#FFFFFF;
  
 
}


.align-center{
text-align:center;
}

h5 color:#40220F;{
font-size:150%;
	font-weight:bold;
	color:#40220F;
	padding-bottom:0.5rem;
	
}

.brown{
	
	

	background-image:url(img/line_brown.gif);
	background-repeat: repeat-x;
	background-position:bottom;
	
}

.pink{
	background-image: url(img/line_pink.gif);
	background-repeat: repeat-x;
	background-position:bottom;
	}


.violet{
	background-image: url(img/line_violet.gif);
	background-repeat: repeat-x;
	background-position:bottom;
	
}



.big_title{
	background:#6c2b36;
	padding:0.5rem 1rem;
	color:#FFFFFF;;
	font-weight:bold;
	border-radius:0.5rem;
	text-align:center;
	margin:0 auto;
	font-size:1.4rem;
	
	
}


.big_title img{
	
	width:1rem;
	height:auto;

}



.subtitle{
border:0;
	font-size: 70%;
	margin-bottom:0.1rem;
}

.products_button{
margin:0 auto;
	background-color:rgba(223,6,35,1);
		font-weight:bold;
		padding:1em ;
		margin:1em auto;
		display:block;
		text-align:center;
		border-radius:10px; 
		text-decoration:none;
	width:60%;
}

.products_button a{
		color:#FFF;
}


.products_button a:hover{
	
	background-color:rgba(223,6,35,0.5);
	         
}


.inner{
	
	width:90%;
	margin:0 auto;
		
}


#link_method

{
margin-top:0;
padding-top:0;
display:inline;

}


#method .flex{
margin-bottom:3rem;
-webkit-justify-content: space-between; 
  justify-content:         space-between;
width:100%;	
	
}



#method .right_contents{
text-align:right;
width:50%
}


#method .right_contents img{
	max-width:45%
	margin:1em auto;
	
}

#method{
background:#FFF;
padding:1rem;
	
}

#method .left_contents .f_right{


	
}
#method .left_contents p.right{

display:block;

	
}


#method .left_contents{
	width:50%;
}

#method .left_contents .f_left{

}

#method .left_contents .f_right{
/*float:left;*/
	margin-left:1rem;
}



#foo{

	display:block;
	font-weight:bold;
	font-size:110%;
	margin:1em  0;
	font-family: 'Avenir Next','Avenir', 'Helvetica Neue','Helvetica Neue','Helvetica',YuGothic,'Yu Gothic','ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro',"メイリオ",Meiryo,"ＭＳＰゴシック",sans-serif;
	text-align:left;
	padding:0;

}



.clear{
	clear:both;
}

.f_left{float:left;}
.f_right{float:right;}


#method {
margin:0 auto;

}



.post{
	
	
}


.link_btn{
	background:#897a7a;
	border-radius:10px;
	padding:0.5em 1em;
	width:16em;	
	color:#FFFFFF;
	min-height:3em;

	font-family: 'Avenir Next','Avenir', 'Helvetica Neue','Helvetica Neue','Helvetica',YuGothic,'Yu Gothic','ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro',"メイリオ",Meiryo,"ＭＳＰゴシック",sans-serif;
	margin-bottom:1rem;
	margin:0 auto 1rem auto;
	
}

.link_btn a{
	color:#FFFFFF;
	font-weight:bold;
}


.link_btn .icon{
float:left;	
color:#FFFFFF;
font-size:250%;
padding-top:0.1em;
	
}

.link_btn p{
	float:right;
	margin-bottom:0;
	font-family: 'Avenir Next','Avenir', 'Helvetica Neue','Helvetica Neue','Helvetica',YuGothic,'Yu Gothic','ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro',"メイリオ",Meiryo,"ＭＳＰゴシック",sans-serif;
	
}

.link_btn button{
	float:left;
	margin-bottom:0;
	color:#FFFFFF;
	font-weight:bold;
	vertical-align:middle;
	background:inherit;
	-webkit-appearance: none;
	border:0;
	font-size:100%;
	padding-top:0.8em;
	margin-left:1em;
font-family: 'Avenir Next','Avenir', 'Helvetica Neue','Helvetica Neue','Helvetica',YuGothic,'Yu Gothic','ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro',"メイリオ",Meiryo,"ＭＳＰゴシック",sans-serif;
	
}



.link_btn02{
	background:#df0623;
	border-radius:10px;
	padding:0.8em 1em;
	width:16em;	
	color:#FFFFFF;
	min-height:2em;
	margin-left:auto;
	margin-right:auto;
	margin-bottom:2em;
	font-family: 'Avenir Next','Avenir', 'Helvetica Neue','Helvetica Neue','Helvetica',YuGothic,'Yu Gothic','ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro',"メイリオ",Meiryo,"ＭＳＰゴシック",sans-serif;
	display:block;
	
}

.link_btn02 a{
	color:#FFFFFF;
	font-weight:bold;
}


.link_btn02 .icon{
float:right;	
color:#FFFFFF;
font-size:120%;
padding-top:0.6em;
margin-right:1em;

	
}

.link_btn02 p{
	float:left;
	margin-bottom:0;
	font-family: 'Avenir Next','Avenir', 'Helvetica Neue','Helvetica Neue','Helvetica',YuGothic,'Yu Gothic','ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro',"メイリオ",Meiryo,"ＭＳＰゴシック",sans-serif;
	padding:0;
	margin-left:2em;
	line-height:120%;
}


.cf:before,
.cf:after {
    content: " ";
    display: table;
}

.cf:after {
    clear: both;
}

.cf {
    *zoom: 1;
}




hr{
	
background-color: #eee;
border-top: 2px dotted #535ca8;
border-bottom: 1px solid  #eee;
margin-bottom:1em;
	
}

nav{

	margin-bottom:2rem;
	
}

nav ul{
width:95%;
margin-left:auto;
margin-right:auto;
display: -webkit-flex; 
display: flex;
/* -webkit-justify-content: center; 
 justify-content:         center;*/
-ms-flex-pack: distribute;
justify-content: space-around;


}

nav li
{
width:33%;
padding:0.5rem 1rem;
text-align:center;	
vertical-align:middle;
border:1px solid #6c2b36;
display:block;
}

nav li a{
font-weight:bold;
color:rgba(108, 43, 43, 1);

font-size:120%;
}

nav li:hover{
font-weight:bold;
background:rgba(108, 43, 43, 1);
color:#FFF;
display:inline;

}
nav li a:hover{
font-weight:bold;
color:#FFF;
}


nav li img{

vertical-align:middle;
width:2rem;
height:auto;
}


nav ul.fixed{
	
display: -webkit-flex; 
display: flex;
width:100%;


}



nav.fixed{
background:rgba(255,255,255,0.8);

}


#link_about_products,
#link_about_campaign,
#link_method,
#link_agreement
{
margin-top:-5rem;
padding-top:5rem;
display:inline-block;
}


#campaign{
	
	/*background:url(img/pink_dot.gif);*/
	background:#F6F0E5;
	padding:1rem;
}

h2,
#campaign h2{
	
margin-bottom:1.5rem;	
	
	
}
#campaign ul,
#campaign p{
	margin-bottom:1.5rem;
}

#campaign .flex{
  -webkit-justify-content: space-around; /* Safari */
  justify-content:         space-around;	
}


#campaign .big_title .pc_only{
	display:inline;
}


#campaign ul li{
	list-style:disc; 
	margin-left:1rem;
	margin-bottom:0.3rem;
}


body{
	color:#333;
	margin:0;
	padding:0;
	max-width:100%;
		font-family: 'Avenir Next','Avenir', 'Helvetica Neue','Helvetica Neue','Helvetica',YuGothic,'Yu Gothic','ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro',"メイリオ",Meiryo,"ＭＳＰゴシック",sans-serif;
	font-size: 0.95rem;
}

a{
	text-decoration:none;
	color:#6c2b36;
}

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

.align-left{
text-align:left;
display:block;	

}




em{
font-style:normal;
font-weight:bold;	
	
}
#wrapper{text-align:center;  margin:auto; max-width:100%;}
#header{background-color:#DF0522;text-align:left; margin:0;max-width: 90%;padding:0.5em 5%;}

h1{
	float:left;
	margin:0;
	margin-top:0.1em;
	padding:0;

}


h1 img{width:5rem;}


h2 img{
max-width:100%;	
	
}




h3{
font-weight:bold;
color:#6c2b36;
font-size:140%;
display:inline-block;
margin-bottom:2rem;
padding-bottom:0.3rem;
border-bottom: 2px solid #6c2b36;
}



section{
	padding-bottom:2rem;

}

#container{
	text-align:left; 
	margin-left:auto;
	margin-right:auto;
	width:80%;

}

.clear{clear:both;}

p{margin-bottom:1em; text-align:left;display:inline-block;}

.note {
	padding:0.8rem;
	font-size: 90%;
	text-align:left;
	/*display:inline-block;*/
	font-size:80%;
	border-radius:8px;
	max-width:90%;
	margin-left:auto;
	margin-right:auto;
	margin-bottom:1rem;
	
}





.f_right{
	float:right;
	
}
		
.pc_only{display:inline-block;}		
.sp_only{display:none;}



.note a{


text-decoration: underline;
}

.contents_common{

text-align:left;
padding:2em 3em;
padding-top:0;

}


.flex{
display: -webkit-flex; 
display: flex;

}



#about_campaign{
display: -webkit-flex; 
display: flex;	
-webkit-justify-content: space-between; 
justify-content:space-between;	
max-width:100%;
}


#about_campaign .item_left{	

}
#about_campaign .item_left img{	
/*max-width:350px;*/
height:auto;
display:block;
}

#about_campaign .item_right p{
margin:0 auto;
	margin-bottom:1rem;
/*display:inline-block;*/	
	}

#about_campaign .item_right img{
	max-width:100%;
	height:auto;
}

#about_campaign .item_right{
/*background:url(img/bg.png);
background-repeat: no-repeat;
background-position:bottom center;*/
padding:1rem;


}



#products_list{
display: -webkit-flex; 
display: flex;
-webkit-justify-content: center; 
justify-content:center;	
-webkit-flex-wrap: wrap; /* Safari */
flex-wrap:         wrap;
max-width:100%;
margin:0 auto;
margin-bottom:1rem;
	
}


#products_list .box img{
width:200px;
height:auto;
}





#agreement{
background:#EEEEEE;
	padding:1rem;
	
}


#agreement ul{margin-bottom:1em}
#agreement ul li{
list-style:disc;
margin-left:2em;
margin-bottom:0.5em;
}


.fixed {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
}

.step{
color:#FFFFFF;
padding:1.3em 0.8em;
border-radius: 0.5em;
display:inline-block;
background:#725C4E;
}


.desc{
	margin-bottom:1rem;
}

.application{
	margin-bottom:2rem;	
	}	

.tb_only{
		display:none;
	}	
	

@media only screen and (max-width:979px){

}


/*@media only screen and (max-width:720px) {	*/
@media only screen and (max-width:641px) {	
	
.tb_only{
		display:none;
	}	
	
.mx100{
max-width:100%;		
}
.big_title{

	padding:0.5rem;		
}


.big_title img{
	
	width:0.8rem;
	height:auto;
}	
		
	
.products_button{
width:90%;
	padding:0.5rem;
	}
	
#campaign .flex{
flex-direction:column;
}

#campaign .item {	
text-align:center;
}

#campaign .item  img{	
max-width:100%;
height:auto;
display:block;
margin:0 auto 1rem auto;
}

	
#products_list{
display: -webkit-flex; 
display: flex;
-webkit-justify-content: center; 
justify-content:center;	
-webkit-flex-wrap: wrap; /* Safari */
flex-wrap:         wrap;
max-width:100%;
margin-bottom:1rem;
}
	
	
#products_list .box {
width:50%;
height:auto;
}


#products_list .box img{
max-width:100%;
height:auto;
}

	
nav li a{
font-size:70%;
}
	
nav{
margin-bottom:1rem;
flex-direction: column;
}


nav li
{
padding:0.5rem;
text-align:center;	
vertical-align:middle;
width:100%;
margin:0;
}


	

	
#foo{
	width:50%;
	display:inline-block;
	font-weight:bold;
	font-size:120%;
	


	}	
	

#method .flex{
	flex-direction:column;

	}
	
#method .left_contents{
	
	float:none;
	width:95%;
	display:inline-block;
	margin:0 auto;
	
}
	
#method .left_contents p,
#method .left_contents .note{
		
		
	}
	
	
	
#method .right_contents{
	float:none;	
	margin: 0 auto;
	width:95%;
	text-align:center;
	margin-bottom:2em;

}
		

#method .right_contennts img{
	max-width:100%;
	margin:1em auto;
	
}	
	
#method .left_contents pre{
		
	}	
	
	

		
	
#method .left_contents p.right{
	width:100%;
	float:none;
	margin:0 auto;
	padding:0;
	
}
	
#sp_image img{
		max-width:40%;
		
	}
	
#sp_image{

		text-align:center;
	}
	

	
/*インスタリンクボタンとハッシュタグコピーボタン*/
.link_btn{
	background:#897a7a;
	border-radius:10px;
	padding:0.5em 0.8em;  
	max-width:100%;	
	color:#FFFFFF;
	min-height:3em;
	margin:1rem auto;
	
}
	
	.link_btn p span{
		
	letter-spacing:-0.1em;
	}
	
	
#container{
	text-align:left; 
	margin-left:auto;
	margin-right:auto;
	width:95%;

}	
.sp_only{display:inline-block;}
.pc_only{display:none;}	
	
#campaign .big_title .pc_only{
	display:none;
}


.big_title{
padding:0.3rem;
font-weight:bold;
font-size:1.0rem;
width:100%;

}
	
/*ナビゲーション上部固定*/
	
	

#wrapper{max-width:100%;}
	
header{
max-width:100%;		
}

#header ul{
max-width:50%;
margin-right:10px;	
}



h1{
	max-width:20%;
}


#header ul img{
max-width:12%;
	
}


p{font-size:120%;}

p{max-height:100%;  }




.contents_common{
padding-left:1em;
padding-right:1em;
text-align:left;


}

#link_about_campaign,
#link_products_list,
#link_method,
#link_agreement
{
margin-top:-5rem;
padding-top:5rem;
}


.inner{
	
	width:100%;
	margin:0 auto;
	
}
	
	
	
#about_campaign{

-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;	

}


#about_campaign .item_left{	


}
#about_campaign .item_left img{	
/*max-width:350px;*/
height:auto;
margin:auto;

	
	
}

#about_campaign .item_right p{
margin:0 auto;
	margin-bottom:1rem;
/*display:inline-block;*/	
	}

#about_campaign .item_right img{
	max-width:100%;
	height:auto;
}

#about_campaign .item_right{
/*background:url(img/bg.png);
background-repeat: no-repeat;
background-position:bottom center;*/
padding:1rem;


}
	
	
	#container img {
		margin:0 auto;
	}	
	
	img{max-width:100%}


}




/*!------------------------------------*\
    Tablet
\*!------------------------------------*/

#shoplist table{
border-collapse: collapse;
width: 100%;
margin:auto;
}	
#shoplist table th,
#shoplist table td{
border: 1px solid #ccc;
padding: 0.5em;
/*font-size: 0.9rem;*/

}

#shoplist table th{
background-color: #efefef;	
font-weight:bold;
}

#real_shop th{
	width:45%;

}



#shoplist table .district td{border:0;font-weight:bold;padding-top:1rem; }