@charset "utf-8";
/* CSS Document /*
@media screen and (min-width:897px) and (max-width: 1024px) {
}
*/

/************************** header **************************/

header 			{ background: #666; color: #fff; padding: 15px 0; text-align: center; margin: 0 auto; }
header .inner 	{ width: 1000px; max-width: 1024px; margin: 0 auto; }
header h1 		{ font-size: 2.6rem; font-weight: 600; font-family: 'Raleway'; float: left; }
header i 		{ float:right; font-size: 2.6rem; }
header a 		{ color:#fff !important; transition: color 0.3s; }
header a:hover 	{ color:#cecece !important; }
@media screen and ( max-width:480px) { 
	header { padding: 15px; }
	header .inner { width: auto; max-width: none; }
}
@media screen and (min-width:481px) and ( max-width:896px) {
	header { padding: 15px; }
	header .inner { width: auto; max-width: none; }
}

/************************** footer **************************/
footer 		{ background: #ccc; padding: 15px; margin: 30px auto 0 auto; text-align: center; }
footer p 	{ padding-bottom: 0; }
footer dt 	{ font-weight:600; font-size: 2rem; padding-top: 10px; }
footer #mysns 			{ width: 1000px; max-width: 1024px; padding: 20px 0; margin: 0 auto; }
footer #mysns ul 		{ display: flex; justify-content: space-between; }
footer #mysns li 		{ padding: 24px; position: relative; width: 49%/*32%*/; background: #fff; }
footer #mysns li a 		{ color: #333; position: absolute; width: 100%; height: 100%; top:14px; left: 0; /*text-decoration: none; text-indent: 100%; white-space: nowrap;*/ overflow: hidden; }
footer #mysns li:hover 	{ opacity:0.6; filter: alpha(opacity=60); -ms-filter: "alpha( opacity=60 )"; }
footer #mysns .twitter 		{ background:#fff url("../../images/logo_twitter.png") no-repeat 20%; background-size: 2em auto; }
footer #mysns .instagram 	{ background:#fff url("../../images/logo_instagram.png") no-repeat 20%; background-size: 2em auto; }
footer #mysns .pinterest 	{ background:#fff url("../../images/logo_pinterest.png") no-repeat 20%; background-size: 2em auto; display: none; }
@media screen and ( max-width:480px) { 
	footer #mysns { width: auto; }	
	footer #mysns ul { display: inline; }
	footer #mysns li { width: 100%; margin-bottom: 10px; }
	footer #mysns li:last-child { margin-bottom: 0;}
	footer #mysns li a { left: 0; top: 0; padding:14px 0 0 35px; text-align: center; }
	footer #mysns .twitter { background:#fff url("../../images/logo_twitter.png") no-repeat 35%; background-size: 2em auto; }
	footer #mysns .pinterest { background:#fff url("../../images/logo_pinterest.png") no-repeat 35%; background-size: 2em auto; }
	footer #mysns .instagram { background:#fff url("../../images/logo_instagram.png") no-repeat 35%; background-size: 2em auto; }
}
@media screen and (min-width:481px) and ( max-width:896px) { 
	footer #mysns { width: auto; }	
	footer #mysns ul { display: inline; }
	footer #mysns li { width: 100%; margin-bottom: 10px; }
	footer #mysns li:last-child { margin-bottom: 0;}
	footer #mysns li a { left: 0; top: 0; padding:14px 0 0 45px; text-align: center; }
	footer #mysns .twitter { background:#fff url("../../images/logo_twitter.png") no-repeat 40%; background-size: 2em auto; }
	footer #mysns .pinterest { background:#fff url("../../images/logo_pinterest.png") no-repeat 40%; background-size: 2em auto; }
	footer #mysns .instagram { background:#fff url("../../images/logo_instagram.png") no-repeat 40%; background-size: 2em auto; }
}

/************************** clearfix **************************/
header::after {
  content: "";
  display: block;
  clear: both;
}