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


#link_about_nano,
#link_about_camp,
#link_method,
#link_agreement
{
margin-top:-8em;
padding-top:8em;
display:inline;

}


#link_method

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

}





#method .left_contents{
	
	float:left;
	max-width:70%;
	display:inline-block;
}


#method .right_contents{
	float:right;
	margin-right:1em;
	max-width:30%;
	margin-bottom:2em;

}



#foo{
	/*width:50%;*/
	display:block;
	font-weight:bold;
	font-size:110%;
	margin:2em auto 1em auto;
	font-family: 'Avenir Next','Avenir', 'Helvetica Neue','Helvetica Neue','Helvetica',YuGothic,'Yu Gothic','ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro',"メイリオ",Meiryo,"ＭＳＰゴシック",sans-serif;
	text-align: center;
}




.clear{
	clear:both;
}

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

#method .title p.right{
    float:left;
	margin-left:1em;
	max-width:30em;

}

#method .title{
	margin-bottom:2em;
	
}

#method {
width:90%;
margin:0 auto;
}

.method{
background:#F8F8F8;
}


.post{
	
	
}




.link_btn{
	background:#897a7a;
	border-radius:10px;
	padding:0.5em 1em;
	width:16em;	
	color:#FFFFFF;
	min-height:3em;
	margin-left:10em;
	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;
	
}

.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{
background: rgba(190,154,90,1);
	margin-bottom:1rem;
}

nav ul{
width:95%;
margin-left:auto;
margin-right:auto;
display: -webkit-flex; 
display: flex;
 -webkit-justify-content: space-around; 
 justify-content:         space-around;

}

nav li
{
padding:0.5rem 1rem;
display:inline-block;
text-align:center;	
vertical-align:middle;	
}

nav li a{
font-weight:bold;
color:#FFFFFF;
display:inline;
font-size:120%;
}


nav li img{

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


nav ul .fixed{
	
display: -webkit-flex; 
display: flex;
width:100%;
 -webkit-justify-content: space-around; 
 justify-content:space-around;

}

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

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;	
}

.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{
width:100%;	
	
}


h3,
h3 img{
	max-width:100%;
	vertical-align:middle;
}


h3{
	
font-weight:bold;
	color:#BD2129;
	font-size:140%;
}

.max-width100{
max-width:100%;
	
}

section{
	padding-bottom:2rem;

}

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

}

.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:90%;
	border-radius:8px;
	max-width:90%;
	margin-left:auto;
	margin-right:auto;
	margin-bottom:1rem;
	
}


.note01{
	
}




.f-right{
	float:right;
	
}
		
.pc_only{display: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;
}



#about_camp{
padding-left:3em;
padding-right:3em;
text-align:left;
padding:2em 3em 2em 3em;
background-image:url(img/model.png);
background-position: right bottom;
background-repeat:no-repeat;
background-color:#eeeeee;
width:100%;
}

#about_camp #inner{
width:600px;	
	
}

#about_camp #inner p{
padding:2em 0;	
}
#about_camp ul li{
	
list-style:disc;
margin-left:2em;
margin-bottom:0.5em;
}

#about_camp ul{
	
margin-bottom:1em;
}




#agreement{
background:#EEEEEE;
	
}


#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:#1B773A;
}

@media only screen and (max-width:979px){
	
#method .title p.right{
	max-width:40em;
}

}


@media only screen and (max-width:720px) {
	
	
#about_campaign{

flex-direction:column;
}


#about_campaign .item_left{	

}
#about_campaign .item_left img{	
max-width:100%;
height:auto;
display:block;
}

	
#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 ul{
width:100%;
display: -webkit-flex; 
display: flex;
 -webkit-justify-content: space-around; 
 justify-content:         space-around;
flex-flow:wrap;	

}

nav li a{
font-weight:bold;
color:#FFFFFF;
display:inline;
font-size:100%;


}	
	
nav li{
margin-bottom:0;
/*background:#F00;*/
padding:0;
line-height:0;
		
	}

.fixed {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
}
	
#foo{
	width:50%;
	display:inline-block;
	font-weight:bold;
	font-size:120%;


	}	
	
	
	

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

}

#method .right_contents img{
	max-width:95%;	
	margin:1em auto;
	
}	
	
#method .left_contents pre{
		
	}	
		
	
#method .title p.right{
	max-width:100%;
}
	
#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;
	max-width:95%;

}	
.sp_only{display:block;}
.pc_only{display:none;}	



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

#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%;
	
}

ul li{
margin:0 1%; text-indent:0; text-align:left;}

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;
}





}