@charset "UTF-8";

body{ background: linear-gradient(to top, #fff, 10%, #e6ffcc);	color: #630;	font-family: "Hiragino Kaku Gothic ProN","メイリオ", sans-serif;}
img{	border: 0;	max-width:100%;	height:auto;}
p{margin-bottom:1em;}
h2{	color: #008080;	font-weight:bold;	font-size:1.5em;}
h3{	font-weight:bold;	font-size:1.2em;}
ol{margin:5px auto 10px;text-align:left;}
a{	font-weight: bold;	text-decoration: none;}
a:link{	color: #6c0;}a:visited{	color: #6c0;}
a:hover{	color: #f93;}
a:active{	color: #f93;}
a.buttonw{	display:inline-block;	padding:10px;	font-size:1.2em;	background:#fff;	border-radius:10px;	margin:5px;}

@media screen and (max-width: 767px) {
    article a{	display:inline-block;	padding:10px;	background:#fff;	border-radius:10px;	margin:5px;	}
    article a:link,article a:visited,article a:hover,article a:active{		color: #6c0;	}
    article a:hover{	opacity:0.7;	}
    
}

header{	background: #38a4c7;	text-align:center;	padding-top:10px;}
header section{	width: 80%;	overflow:hidden;	max-width: 870px;	margin: auto;}
header nav#id a,header nav#id a:link,header nav#id a:visited{color:#6c0;}

main{background: linear-gradient(to top, #e9ffff, 20%, #b3dbff);
text-align: center;	width: 80%;	margin: 5px auto;
border: 5px outset #309966;	overflow:hidden;
max-width: 870px;}

main > article{	text-align: center;	padding:10px;}
main article a:hover img{opacity:0.7;}

footer{background:#cf9;border-top:5px double #fc9;font-size:0.8em;padding:5px;}
footer nav ul.nav{overflow:hidden;margin:0 auto;}
footer nav ul.nav li{float:left;}

@media screen and (max-width: 767px) {
    footer nav ul.nav li a{	display:inline-block;	padding:10px;	background:#fff;	border-radius:10px;	margin:5px;	}
    footer nav ul.nav li a:link,footer nav ul.nav li a:visited,footer nav ul.nav li a:hover,footer nav ul.nav li a:active{		color: #6c0;	}
    article a:hover{	opacity:0.7;	}
    
}

/*基本スタイル*/
article strong{font-weight:bold;}

/*---TOP-----*/
#recentdays{	border-top: 3px double #008080;}
#recentdays ol{}
aside ol{max-width:initial;max-width:auto;}
ol li time,aside ol li span{width:100px;font-weight:bold;text-align:right;display:inline-block;margin-right:10px;}

#gallery_feed{border-bottom: solid 2px;}
#blog_area{overflow:hidden;	border-bottom: 3px double #008080;	margin-bottom: 10px;}
aside ol li span,aside ol li.sleep{	color: #f00;	font-weight: bold;	text-align:left;}

@media screen and (min-width: 768px) {
    #recentdays ol,#gallery_feed ol{	max-width:380px;	}
    .rss_blog{	width:50%;	min-width:250px;	float:left;	}
    
}
@media screen and (max-width: 500px) {
    #gallery_feed ol li a,#blog_area ol li a{		white-space: nowrap;    	overflow: hidden;    	text-overflow: ellipsis;    	display: block;	}
    ol li time, aside ol li span{
    display:block;
    }
    
}

/*---mailform-----*/
#mail #formWrap form {	max-width:500px;	margin:0 auto;	text-align:justify;}
table.formTable{	width:100%;	margin:0 auto;	border-collapse:collapse;}
table.formTable td,table.formTable th{	border:1px solid #ccc;	padding:10px;}
#mail #formWrap fieldset{overflow:hidden;margin-bottom:5px;}
#mail #formWrap label{	width:30%;	font-weight:bold;	background:#efefef;	text-align:left;	display:block;	float:left;	padding:5px;	margin-right:2%;}
#mail #formWrap label span{color:#f00;}
#mail #formWrap input,#mail #formWrap textarea{	width:63%;	padding:5px;}
#mail #formButton{text-align:center;}
#mail #formButton input{	width:45%;	font-weight:bold;	margin-left:0.5%;}

@media screen and (max-width:767px) {
    #mail #formWrap fieldset{	overflow:visible;	}
    #mail #formWrap label,#mail #formWrap input,#mail #formWrap textarea{		width:95%;		float:none;		margin:auto;		display:block;	}
    
}