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


#link_about_nano,
#link_about_camp,
#link_post,
#link_agreement
{
margin-top:-6em;
padding-top:6em;
display:inline;

}


#about_nano,
#about_camp,
#post,
#agreement
{
padding-top:2em;

}


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


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

}



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




.clear{
	clear:both;
}

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

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

}

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





#description{
	margin-bottom:1em;
	background:#535ca8;
}


#description p{

	font-size:170%;
	color:#FFFFFF;	
	padding:1em 0.5em;
	text-align:center;
}





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

.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 ul{
width:95%;
	margin-left:auto;
	margin-right:auto;
	background:rgba(255,255,255,0.9);
}

nav li
{
border:1px #535ca8 solid;
padding:0.5em;
display:inline-block;
width:22%;
text-align:center;	
background:rgba(255,255,255,0.9);
	
	
}

nav li a{
color:#535ca8;
	font-size:95%;

}

nav li a:visited{
color:#535ca8;
}

nav{
	color:#535ca8;
	/*max-width:980px;*/
}


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

}


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;
	width:80px;
}
h2{
	
margin-bottom:1em;
}

h2 img{
max-width:100%;	
	
}

#header ul{
text-align:right;	
float:right;
margin:0;
margin-right:20px;
}


#header ul li{
display:inline;	
margin:0;
}

#header ul li img{
max-width:30px;
	
}

#container{text-align:left; ;margin-left:auto;margin-right:auto;max-width:90%;}

.clear{clear:both;}

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

.note {
	margin:1em 0;
	font-size: 90%;
}

img{max-width:100%;}

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




h3{
	
font-weight:normal;
color:#535ca8;	
font-size:200%;
text-align:left;
margin-bottom:1em;
}


.contents_common{

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

}


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

}



#nano_image{
display: -webkit-flex; 
display: flex;
-webkit-justify-content: space-around; 
justify-content:space-around;

}


#nano_image .box img{
width:190px;
height:190px;

}


#about_nano{

}

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

}

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

#post{
background:#F8F8F8;
}



#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:#535ca8;
border:1px #535ca8 solid;
padding:1.3em 0.8em;
border-radius: 0.5em;
display:inline-block;
}

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

}


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

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


	}	
	
pre #foo{
		
width:60%;
	}	
	
	
#link_about_nano,
#link_about_camp,
#link_post,
#link_agreement
{

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

}

#post .right_contents img{
	max-width:95%;	
	margin:1em auto;
	
}	
	
#post .left_contents pre{
		
	}	
		
	
#post .title p.right{
	max-width:100%;
}
	
#sp_image img{
		max-width:40%;
		
	}
	
#sp_image{

		text-align:center;
	}
	
	
	
#description{
}


#description p{
	
	background:#535ca8;
	font-size:120%;
	color:#FFFFFF;	
	padding:1em;
	text-align:center;
	font-weight:bold;
}

	
/*インスタリンクボタンとハッシュタグコピーボタン*/
.link_btn{
	background:#897a7a;
	border-radius:10px;
	padding:0.5em 0.8em;  
	max-width:100%;	
	color:#FFFFFF;
	min-height:3em;
	margin:0 auto 1em 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;}	
	
nav{
max-width:100%;
	}
	
nav ul{
width:100%;
display: -webkit-flex; 
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
 -webkit-justify-content: space-around; 
 justify-content:         space-around;
margin-left:auto;
margin-right:auto;
z-index:10;
}
nav ul li
{
/*width:42%;*/
width:12em;
font-size:80%;
text-align: center;
margin-top:0em;
padding:0.2em;
	
	}
	
nav ul.fixed{
	
display: -webkit-flex; 
display: flex;
width:100%;
display: -webkit-flex; 
display: flex;
 -webkit-justify-content: space-around; 
 justify-content:         space-around;
}

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

	
#nano_image{
display: -webkit-inline-flex; 
display: inline-flex;	
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
}	
	
	
	
#nano_image .box img{
     width: 130px;
     height: 130px;
     margin-bottom: 1em;

}


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

#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-bottom:1em; margin-right:1%;text-indent:0; text-align:left;}

p{font-size:120%;}

p{max-height:100%;  }




 .intro{
	width:90%;	

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


}


#about_camp{
padding-left:1em;
padding-right:1em;
text-align:left;
background-image:none;


}

	
#inner{
	max-width:100%;	

	}




}