@charset "UTF-8";
/* CSS Document */
html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video{
margin:0;
padding:0;
border:0;
outline:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section { 
display:block;
}
table {
border-collapse:collapse;
border-spacing:0;
}
input, select {
vertical-align:middle;
}
header,footer,nav,section,article {
display:block;
}

img{
vertical-align: bottom;
}
*{
margin: 0px;
padding: 0px;
}
html{
font-size: 62.5%;
overflow-y: scroll; 
height: 100%;
}
body{
-webkit-text-size-adjust: 100%;
font-size: 12px;
line-height: 1;
font-family: arial,'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, sans-serif;
color: #7c6b63;
height: 100%;
background: #ffffff;
background-size: cover;
}

/*link*/
a,a:link,a:visited{
color: #00a07c;
margin:0;
padding:0;
text-decoration: none;
}
a:active,a:hover{
text-decoration: underline;
}
a:hover img{
filter: alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;
}
a img {
border-style:none;
}

header{
width: 100%;
margin:0 auto;
padding:0 auto;
padding-top: 50px;
background: #b1d7c7;
text-align: center;
}
header img{
margin:0 auto;
padding:0 auto;
}
h1{
font-size: 50px;
font-weight: bolder;
text-align: center;
line-height: 110%;
letter-spacing: 0.2em; 
}

h2{
font-size: 30px;
line-height: 100%;
font-weight: bolder;
letter-spacing: 0.1em; 
margin-bottom:20px;
}
h3{
font-size: 20px;
line-height: 200%;
font-weight: bolder;
letter-spacing: 0.1em; 
margin-top:5px;
}

p{
font-size: 14px;
line-height: 200%;
padding-bottom:5px;
}
.clearfix:after {
content: '';
display: block;
clear: both;
}
.clearfix {
zoom: 1; /* for IE6/7 */
}
#content{
width: auto;
margin: 0px auto;
padding:  0px auto;
}
section{
clear: both;
overflow: hidden;
text-align: center;
margin: 0px auto;
padding:  0px auto;
}

.inner{
clear: both;
overflow:hidden;
}
ul{
margin:  0px auto;
padding: 0px auto;
text-align: center;
list-style:none;

}
ul li{
list-style-type: none;
list-style-position: outside;	
float: left;
text-align: center;
}
ul li img{
height: auto;
width: 100%;
}
#portfolio{
border-top: solid 1px #dddddd;
}

.inner{
text-align: center;
width: auto;
margin: 0px auto;
padding: 50px;
padding: 0px auto;
}
#portfolio .box_l{
width: 50%;
height:auto;
background: #f0f0f0;
float: left;
}
#portfolio ul{
width: auto;
margin:20px;
clear: both;
overflow:hidden;
}

#portfolio ul li{
width: 50%;
height:auto;
text-align: center;
margin: 0px auto;
padding:  0px auto;
}
#portfolio .box_r{
width: 45%;
float: right;
}
.portfolio_cb{
text-align: center;
clear: both;
overflow:hidden;
margin: 0px auto;
padding:  0px auto;}
#sticker{
border-top: solid 1px #dddddd;
}

#sticker ul li{
width: 50%;
height:auto;
text-align: center;
margin: 0px auto;
padding:  0px auto;
}
#about{
clear: both;
overflow:hidden;
border-top: solid 1px #dddddd;
}



/*footer*/
footer{
border-top: solid 1px #dddddd;
clear: both;
overflow:hidden;
margin: 0px;
padding: 0px;
background: #ffffff;
}
footer p{
font-size: 11px;
text-align: center;
margin:0px;
padding:10px;
}
#pagetop {
position: fixed;
bottom: 20px;
right: 20px;
}
#pagetop a {
text-indent:100%;
white-space:nowrap;
overflow:hidden;
display: block;
width: 40px;
height: 40px;
background: #7c6b63 url(../images/btn_pagetop.png) no-repeat top center;
background-size:contain;
}

#pagetop a:hover {
filter: alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;
}
/*-------------------media-------------------*/
@media screen and (min-width: 979px) {
}

@media screen and (max-width:699px) {
header{
margin: 0px auto;
padding-top: 20px;
}
header img{
width: 100%;
height: auto;
}
h1{
font-size: 30px;
letter-spacing: 0.15em; 
}

h2{
font-size: 20px;
letter-spacing: 0; 
margin-bottom:20px;
letter-spacing: 0.1em; 
}
h3{
font-size: 16px;
letter-spacing: 0; 
}
#content{
width: 100%;
margin: 0px auto;
padding:  0px auto;
float:none;
}

p{
font-size: 12px;
line-height: 180%;
}

.inner{
padding: 20px;
}

#portfolio .box_l{
width: auto;
float: none;
}

#portfolio ul{
padding-top: 20px;
padding-bottom: 20px;
}
#portfolio ul li{
width: 100%;
}
#portfolio .box_r{
display: none;
}
.portfolio_cb{
display: none;
}
#sticker ul li{
width: 100%;
}
}